My main navigation consists of multiple div elements. Each page has a separate div element for the active link, causing its height to be higher. This seems to be affecting the line height and position of the other divs on the page.
Below is my SASS code:
#neo_mainnav { /* Main navigation */
position: fixed;
bottom: 35px;
width: 480px;
.nav_text {
font: 14pt Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
line-height: 35px;
}
#video_nav {
float: left;
margin-right: 10px;
width: 112.50px;
height: 35px;
background: #66a9c6;
}
#video_nav_active {
float: left;
margin-right: 10px;
width: 112.50px;
height: 50px;
background: #66a9c6;
}
#gallery_nav {
float: left;
margin-right: 10px;
width: 112.50px;
height: 35px;
background: #f0a262;
}
#gallery_nav_active {
float: left;
margin-right: 10px;
width: 112.50px;
height: 75px;
background: #f0a262;
}
#floorplans_nav {
float: left;
margin-right: 10px;
width: 112.50px;
height: 35px;
background: #66a9c6;
}
#floorplans_nav_active {
float: left;
margin-right: 10px;
width: 112.50px;
height: 75px;
background: #66a9c6;
}
#contact_nav {
float: left;
width: 112.50px;
height: 35px;
background: #f0a262;
}
#contact_nav_active {
float: left;
width: 112.50px;
height: 35px;
background: #f0a262;
}
} /* Main navigation end */
To view the HTML code, click here.
You can see the entire page here.