I've come across this question multiple times before, but I still haven't found a suitable answer or solution that matches my specific situation. (If you know of one, please share the link with me!)
My goal is to create a basic dropdown menu within a horizontal navigation bar where a logo image is centered with links on either side. While I have Bootstrap installed, I couldn't quite figure out how to implement it using their framework, so I decided to build it from scratch.
The implementation doesn't necessarily have to be limited to HTML/CSS; however, I'm not well-versed in JavaScript yet (still learning).
Below is my current code snippet:
#header {
height: 40px;
position: relative;
margin: 80px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: lowercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
color: #000;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#header ul li a:hover {
color: #c4c4c4;
}
.logo {
position: absolute;
left: 50%;
margin: -60px 0 0 -124px;
}
@media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}<div id="header">
<a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="Whatever Photography" height="140" width="230" /></a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Galleries <span class="caret"></span></a></li>
<ul class="sub-menu"> <!--if you comment out the sub-menu, you'll see the navigation as I want it to look-->
<li><a href="">Portraits</a></li>
<li><a href="">Landscapes</a></li>
<li><a href="">Personal</a></li>
</ul>
<li><a href="">Blog</a></li>
<li><a href="">Info/Rates</a></li>
<li><a href="">Prints</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>Another issue I've run into is that when I resize my viewport to a mobile size, the logo image shifts to the top of the navigation links, partially hiding it from view. This is a separate challenge that needs addressing...