I have code that works on one server but not on another

HTML & CSS
1

This issue is that the navigation on the responsive site works no problem on my own server but when it goes on to the host server it no longer works. Is this an issue with the code or is it a server issue. new to all of this and would appreciate any help.

<div class="nav-header">	
 	<section class="navigation">
  	<div class="nav-container">
    
	  <div class="brand">
      <a href="index.html"><img src="images/logo-just-text.png" alt="Montrose Port Harbour Logo Logo"></a>
    </div>
		
	<div class="brand-over">
		  <a href="index.html"><img src="images/logo-colour.png" alt="Montrose Port Harbour Logo Logo"></a>
	</div>
    
	  <nav>
      
		<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
		  
        <li><a href="index.html">HOME</a></li>
        <li><a href="marine_services.html">MARINE SERVICES</a></li>
        <li><a href="port_services.html">PORT SERVICES</a>
        <!-- dropdown if required 
		<ul class="nav-dropdown">
            <li><a href="#!">Web Design</a></li>
            <li><a href="#!">Web Development</a></li>
            <li><a href="#!">Graphic Design</a></li>
        </ul>
        -->
		</li>
        <li><a href="news.html">NEWS</a></li>
        <li><a href="authority_trust.html">PORT AUTHORITY</a></li>
		<li><a class="current" href="webcam.html">OUR VIEW</a></li>
        <li><a href="contact-us.html">CONTACT US</a></li>
		
      </ul>
    
	  </nav>
		
	
	</div>
			
</section>
</div>
2

CSS CODE

@charset "utf-8";
/* CSS Document */



.nav-header{
	position: fixed;
	width: 100%;
	margin: 0 auto;
	z-index: 500;	
}

/*i changed this to show the header nav as it was not showing

.navigation {
  height: 70px;
  background-color: rgba(255,255,255,0);
  transition: 0.5s;
  padding-right: 3%;
}*/

.navigation {
  height: 70px;
  background-color: rgba(255,255,255,1);
  transition: 0.5s;
  padding-right: 3%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.scrolled{
  background-color:rgba(255,255,255,1);
  transition: 0.5s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}


.brand {
  position: absolute;
  padding-left: 8%;
  padding-top: 0px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.3em;
  font-weight: 700;
  opacity: 0;
}

.brand-over{
  position: absolute;
  padding-left: 8%;
  padding-top: 0px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.3em;
  font-weight: 700;

	
}
.brand-over a{
	box-shadow: 0 8px 3px -4px rgba(0, 0, 0, 0.2);
}

.brand-over-other{
  position: absolute;
  padding-left: 8%;
  padding-top: 0px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.3em;
  font-weight: 700;

	
}
.brand-over-other a{
	box-shadow: 0 8px 3px -4px rgba(0, 0, 0, 0.2);
}



.nav-container {
  max-width: 100%;
  margin: 0 auto;
	background-color: aliceblue;

}



nav {
  float: right;
  color:rgba(34,34,34,1.00);

}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  color:rgba(34,34,34,1.00);
  text-decoration: none;
}


nav ul li a:hover,
nav ul li a:visited:hover {
  background:rgba(60,126,193,0.58);
  color: #ffffff;
  transition: .8s ease;
 
	
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}


/*NAV OTHER*/

nav-other {
  float: right;


}

nav-other ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav-other ul li {
  float: left;
  position: relative;
}
nav-other ul li a,
nav-other ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  color:rgba(34,34,34,1.00);
  text-decoration: none;


}
nav-other ul li a:hover,
nav-other ul li a:visited:hover {
  background:rgba(60,126,193,0.58);
  color: #ffffff;
  transition: .8s ease;
 
	
}
nav-other ul li a:not(:only-child):after,
nav-other ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav-other ul li ul li {
  min-width: 190px;
}
nav-other ul li ul li a {
  padding: 15px;
  line-height: 20px;
}



/*NAV OTHER END*/


.nav-list .current{
	color: #3C7EC1;
	border-bottom: #3C7EC1 thin solid;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation this is the block in the corner*/
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 70px;
  width: 70px;
  background-color: #3C7EC1;
}


@keyframes caret {
  50% {
    border-color: transparent;
  }
}





@media only screen and (max-width: 1245px){
 

  .nav-mobile {
    display: block !important;
  }

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
	background: rgba(255,255,255,0.84);
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
	  
  }

nav-other{
    width: 100%;
    padding: 70px 0 15px;
  }
nav-other ul {
    display: none;
  }
nav-other ul li {
    float: none;
	background: rgba(255,255,255,0.84);
  }
nav-other ul li a {
    padding: 15px;
    line-height: 20px;
  }
nav-other ul li ul li a {
    padding-left: 30px;
	  
  }

.nav-dropdown {
    position: static;
  }
	
.navigation {
  padding-right: 0%;

}	
	
}

@media screen and (max-width: 1255px) {
	
	.brand-over{
		display: none;
	}

	.brand{
		opacity: 100;
		padding-left: 2%;

	}

}


@media screen and (min-width: 1245px) {
  .nav-list {
    display: block !important;
  }
	
}
	
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;

  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}
.nav-container {
  padding: 0;
}
3

Off Topic:

@iancaie01: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your posts above for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

Oh, and welcome to the forums.

1 Like
4

thanks for the help that looks much better than it did when i first posted it. noted for future. Cheers

1 Like
5

Resolved there was a server conflict HTTPS calling on HTTP

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.