HTML5 NavBar

I am trying to get a NavBar added to an HTML page and cannot seem to get things working correctly. I have attached a snippet file with the NavBar code and also the CSS that I have put together. Here are the problems I am having:

1. I want the NavBar to span the entire web browser page. To do this I put the code under the "full_width" class, rather than the "page_wrapper". However the NavBar is floating to the right and leaves a gap on the left side of the browser.

2. Inline-block is not working. I have moved the <nav> around everywhere I can in the file but no matter where I put it inline-block will not work.

Help please.navbar.htmlstyle.css
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Not sure what you are trying to achieve but here is why your nav bar is shifted to the right.

You have the nav bar at 100% inside a container 100% and you have a left and right margin on the nav bar of 22px (line 4). In addition you have a border around the nav which adds a further 2px of width.
nav {
  background-color: #36499c;
  border: 1px solid #dedede; /* <==== */
  border-radius: 4px;
  color: #888888;
  display: block;
  margin: 8px 22px; /( <=====* /
  overflow: hidden;
  width: 90%;

Open in new window

Remove those and your nav will fill the width of the page without extending over

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gactoAuthor Commented:

That solved my first problem. I have removed those elements and the NavBar now expands to 100%.

My second problem still has not changed, inline-block for nav ul li does not work for some reason.
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Gacto,
its difficult to look at HTML and CSS Code and IMAGINE how the page looks, so it will be easy if you post a link for members to look at and check what is happening.

anyways, from your style.css I see that you have a float:right property for the site-menu. removing that may help.

see the image for reference. site-menu.jpg
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
My second problem still has not changed, inline-block for nav ul li does not work for some reason.
Well I would take a wild guess and say that the width: 100% on the li element is going to trump the inline-block.
The li's are inline-block but making them 100% width is going to make the inline part null and void.
Line 89 of style.css
nav li {
  display: inline;
  float: left;
  width: 100%; /* <=== eeerrhmm */

Open in new window

Julian HansenCommented:
... you can loose the float: left as well - the inline-block will put the items next to each other
gactoAuthor Commented:
Ok that is the problem. That section of the style sheet you are referring to is only supposed to impact the responsive styled nav for mobile devices. However I assume since I used <nav> in both, even though I have nested the responsive elements underneath #res_nav in the style sheet, the styles are conflicting.

Now I have to figure out how to fix that. I wonder if I can apply an id selector and/or class to the nav tag?
Julian HansenCommented:
There are many ways to skin the cat

1. By ID
2. By Class
3. By parent selector

Depends entirely on your page.
gactoAuthor Commented:
Ok this is a template that was provided to me by a client and I am trying to re-configure what was originally there. The original site layout had the nav bar set up as a <div class="site_menu"> <ul class="main_menu">. In the original CSS there is a class for .site_menu, but no class for .main_menu. The CSS I uploaded is the original with the section I added for the <nav> tag. Since I couldn't figure out why the original .main_menu class was missing from the CSS I decided it would be easier to just use the <nav> tag.

I have now added an ID, nav_bar, and a Class, nav_main, to my nav bar in an attempt to separate it from the styles I have for the #res_nav, but I am still not getting the results I need. There is obviously something in the style sheet that is having an adverse effect on this but I cannot seem to track it down.
gactoAuthor Commented:
Ok I have removed the nav responsive style section of the CSS and the format for the main nav bar now works. What I can't figure out is why that section of the CSS is effecting the main nav that I have set up.
Julian HansenCommented:
you need to give us something.

Are you using the developer tools in the browser (Firebug, Inspect Element etc)? Invaluable for debugging.
gactoAuthor Commented:
What do I need to give you? I thought putting the html and css file out would be the information needed to get help. If there is something specific that I can provide to make this easier to troubleshoot let me know and I will put it out there.
Julian HansenCommented:
I thought putting the html and css file out would be the information needed to get help
... but you changed the above yes? and you did not post anything back showing your changes
gactoAuthor Commented:
Ok that makes sense. Yes I have made some changes and will post them here.

To the last part of your question, I overlooked that in my response, I am the developer tools in Firefox but I must admit I am a complete novice with them.

Here are the updated files that I have created. I am uploading two sets with what works and what doesn't.

1. navbar_nav.html and style_nav.css - I have these two linked together and the results are what I expect. I have commented out the code in  navbar_nav.html related to the responsive styled menu for mobile devices. I have also deleted the style for the responsive nav in style_nav.css.

2. navbar.html and style.css - These files are exactly the same as the ones above except the responsive nav styles, #res_nav, have been added back into the style sheet. As soon as those styles are added back the inline-block stops working.

You will notice in the style sheets I have added an ID and Class for the main nav bar. I thought this would eliminate the conflict.navbar-nav.htmlstyle-nav.cssnavbar.htmlstyle.css
Julian HansenCommented:
I am a bit confused - in the second set of files the following is still active.
The width: 100% is going to nuke the inline-block - and you don't need the float left.
Line 90 of style css
nav li {
  display: inline;
  float: left;
  width: 100%;

Open in new window

gactoAuthor Commented:
In navbar.html, line 65 of code I have <nav id="nav_bar" class="nav_main">. Then in style.css, line 4 I have #nav_bar and .nav_main styles defined. I thought those styles would take precedence over the styles you are referring to on line 90. All of those styles are in place for responsive styling related to mobile devices. Everything beginning on line 76 through line 141 should be tied to the #res_nav ID. This should only apply to the section of code on lines 50-60. Or at least that is what I thought.
gactoAuthor Commented:
So I think the question now is how do I have styles defined for the main nav bar that are not impacted by the styles I have defined for the responsive navigation. I thought what I had done with ID and Class would work but that is obviously wrong.

If I change the lines you have indicated then that kills my responsive navigation.
Julian HansenCommented:
Then just add this to the bottom of your style sheet
#nav_bar li {
  float: none;
  width: auto;

Open in new window

gactoAuthor Commented:
Julian - that works. I figured it would be simple but I didn't think about putting that into the style for #nav_bar li. I know this is a topic for another post at some point but I still cannot figure out why the style tied to #res_nav was effecting the elements I had under #nav_bar.

Either way, thanks for the help. I am sure I will be asking several more questions before I get this done.
Julian HansenCommented:
You are welcome.

Hint - get familiar with the console window - it can save you ours of time. Select the element you are interested in the left pane and look at the styles that apply on the right - it will give you some idea of where styles are being applied from.
gactoAuthor Commented:
Julian - Thanks for the advice. I have spent the better part of today working in and with the developer tools in both Firefox and Chrome. I am starting to see how those tools can save me a TON of time.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.