Help! Static navbar making rest of container transparent

Hello everyone,
I am trying to add a static navbar to my tribute page. I’ve pasted some code in as a starting point for a static navbar but the result is the background color of my container goes transparent.
I cannot see why this is happening though no doubt its due to my messy/wrong coding somewhere.
Any help would be greatly appreciated.
http://codepen.io/MatWard/pen/LZxmqJ

I’ve also noticed that now the text is the full width of the screen. Before trying to add the navbar the widtth of the container was around 80% of the screen.

I have now moved the navbar code to before the container line of code just after the body opening tag. This has stopped the container becoming transparent but the navbar itself is transparent. Maybe it’s something obvious? :confused:
http://codepen.io/MatWard/pen/LZxmqJ

I’m sorry, but I don’t see the HTML for the navbar? If you’re using a tag other than <nav>, I suggest changing it as such. Also Bootstrap has a built in navbar, if you don’t want the hassle of making your own.

If you do want to make your own navbar instead of using Bootstrap I suggest looking at this:
http://www.w3schools.com/css/css_navbar.asp

hi,
thanks for the reply. I thought i had creted a fork with the new code but you’re right it’s not there.
I’m not too good with codepen yet. Will get the new code back on there now.
Thanks for the link you sent.

http://codepen.io/MatWard/pen/xOqGzM

Hi, i think the first step is separate the “style” from the html (because is not best practice).

Second step: nav bar code, bootstrap example:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Okay, first of all I would put your CSS separate from HTML (Codepen has a handy CSS section where you can simply copy-paste everything inside the style tags for it to work) and avoid inline-styling. However your problem was this: in the container class inside your navbar you had

<... style="rgba(218, 213, 219, .9)">

However you have to define an actual attribute to which you are assigning this style. You want to change your background. So do this:

<... style="background:rgba(218, 213, 219, .9)">

Better still in your CSS do this:

nav > .container{
  background: rgba(218, 213, 219, .9);
}

Further your navbar will end up covering a bit of the top of your body container. You could do something like this with CSS to fix that:

nav + .container{
   margin-top: 50px;
}

Here’s a reference for CSS selectors in case you need it.

Thankyou both for your ssistance.
I will go through your replies in detail now but thanks for taking the time

1 Like