Geek Answers Handbook

Simplified title for a minimal website - position issue

I am Jason and I am trying to get into the basics of some HTML / CSS (with bootstrap) / JS for springboards with some external knowledge

I read a few lessons: some are good, some are bad - and I'm trying to go through the site myself, as I think it will help me learn faster. Right now I have a logo that I'm trying to fix in the upper / middle left corner of the screen, and the basic built-in menu to the right of this logo on one line to the right. However, for some reason, the menu will not interact, staying on the line with the logo. The menus are also stacks, not horizontal. Is it necessary to include the logo in the same container, or is there a better way to do this in order to manipulate the road?

<div class="nav"> <div class="logo"> <img src="logo.gif"> </div> <div class="container"> <ul class = "pull-right"> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </div>

CSS

 .nav li{ display: inline; } .logo{ position: fixed; top: 10px; left: 50px; } .nav a { color: #fff; font-size: 16px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; }

I'm sure pull-right is not needed, but I left it there to see where I am on the wrong track. Many thanks.

+5
source share
2 answers

Try the following:

 .nav { position: fixed; top: 10px; } .nav li{ display: inline-block; } .logo{ position: relative; left: 50px; } .nav a { color: #fff; font-size: 16px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; }

Thus, the entire navigator will be fixed, and not just the logo, remember that fixed positioned elements are abstracted from the corresponding containers and are associated with it instead.

+7
source

Take a look at this JSFiddle

Fix the whole navigation bar, not just the logo!

CSS

 body{ background-color:black; } .nav { position: fixed; top: 10px; } .nav li, .container, .logo{ display: inline-block; } .logo{ position: relative; left: 50px; margin-right:10px; vertical-align:middle; } .nav a { color: #fff; font-size: 16px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; }
+1
source

More articles:


All Articles