How do I create a fixed navigation bar?

malinhagman · Member · Aug 23, 2014 at 7:23 pm
Copy link

Add topic to favorites
Hi!

I´d like to add a fixed navigation bar that follows the blog content while scrolling down but I don´t know how to do it. Can someone help me with that? Thanks!

The blog I need help with is malinhagman.com.

The blog I need help with is: (visible only to logged in users)
m5mason · Member · Aug 23, 2014 at 11:23 pm
Copy link
Try this…

Add the standard nav bar to your site so it’s displayed at the top, then use the following code to fix it in place:
```
.menu {
	z-index: 1;
	position: fixed;
}
```
Please let me know if this works!
malinhagman · Member · Aug 24, 2014 at 11:45 am
Copy link
Hm, unfortunately it isn´t working. I tried to add the navigation bar to the top of my page but when I then add the codes the text in the bar (Home) jumps down to a place below the header and the navigation bar doesn´t follow while scrolling. I´ve changed the codes for the bar a bit lately, maybe it has something to do with that? Do you know any other codes for displaying the navigation bar at the top of the site? I might have been using the wrong ones.
m5mason · Member · Aug 24, 2014 at 6:38 pm
Copy link
Hmm, I’m not sure. Try asking thesacredpath. He’s a happiness engineer here and knows a lot about this stuff.
hallluke · Member · Aug 24, 2014 at 6:56 pm
Copy link
Not far off! Try setting the top offset to zero too, like so:

div#access {position:fixed; top:0; z-index:100;}
malinhagman · Member · Aug 26, 2014 at 1:13 pm
Copy link
It´s working! Thanks to the both of you for helping me! I actually have one more question that you might be able to help me with. I´d like to change the color of the navigation bar from black to white and the text to black. I´d also like the navigation bar to be framed, since the background is white. Do you know if this is possible to do?
m5mason · Member · Aug 26, 2014 at 1:24 pm
Copy link
Hooray!

For the colors and border, try this:
```
.menu {
          background-color: #FFF;
          color: #000;
          border: 3px solid black;
          border-radius: 10px;
                }
```
“border-radius” gives the corners a curved look, which is sometimes more visually appealing than blocking them off. If you don’t like the look, just remove that line of code.

You can adjust the thickness of the border by adjusting the “3px” part of the code.

Please let me know if this works!
hallluke · Member · Aug 26, 2014 at 2:32 pm
Copy link
I’ve just looked at this again and you might also want to include the following so the menu isn’t stuck under the WordPress admin bar when a logged-in user visits your site:

.logged-in div#access {top:32px;}
malinhagman · Member · Aug 27, 2014 at 7:47 pm
Copy link
Once again, thanks for the help! I have a few more questions though.
What are the codes for the different colors? I assume #FFF is the code for black, but what is the code for white? Since I want the border to be white I tried to change “solid black” to “white” but it isn´t working. Also, can I make the border wider, or can it just be as wide as the content? Right now there is some space on both sides of the border that I´d like to remove.
m5mason · Member · Aug 27, 2014 at 9:59 pm
Copy link
“solid” is the border type. You can also have “dashed”, “dotted”, or a few more. If you want to change the color, change “black” to either “white” or #FFF. (#FFFFFF is the hex code for white. #000000 is black. CSS allows you to shorten either of those to 3 characters instead of 6, as you’ve seen.)

You can use a color picker on the internet to choose the color you want and get its hex value, or if it’s a standard color (black, white, blue, etc.) you can just write the actual word “black” (or whatever) in the code.

You can use the border-width property to set the width. Ex: “border-width: 400px;”

For what you’re going for, you may need to change the menu width, not the border width — I’m not sure. To do that, you’d use “width” instead of “border-width”.

Hope this helps!
malinhagman · Member · Aug 28, 2014 at 3:08 pm
Copy link
Thank you so much for all your help!
m5mason · Member · Aug 28, 2014 at 7:05 pm
Copy link
My pleasure!
fightbackhelp · Member · Aug 28, 2014 at 7:12 pm
Copy link
I have created a static front page (Home) and a blog page (blog)
I plan to use the “Big Brother” them for my blog but cannot find a way to create a horizontal menu at the top of my Front page. I want to place the horizontal menu on each of my static pages.
thesacredpath · Member · Aug 28, 2014 at 8:03 pm
Copy link
Hi there @fightbackhelp, you can read more on how to create the menu under “Custom Menus on the Big Brother Showcase page.

See our Custom Menus support page for more information on setting up and configuring one on your site.
thesacredpath · Member · Aug 28, 2014 at 8:06 pm
Copy link
@fightbackhelp, also, since you are going to use a different theme than the one being discussed in this thread, if you have additional questions, can I ask you to start a new thread in the main support forum for questions of a general nature, or in the CSS forum if you are wanting help with customization.

Many thanks in advance. :)
fightbackhelp · Member · Aug 29, 2014 at 12:43 am
Copy link
To “The Sacred Path” (Happiness Engineer)
Thanks for your comments. I will read the suggested sites diligently.
Regretfully, there is little possibility that I’ll thoroughly understand it but I’ll try.
I’ll try. Honest, I’ll try!
thesacredpath · Member · Aug 29, 2014 at 1:27 am
Copy link
@fightbackhelp, anything you don’t understand, just ask here in the forums and we would be happy to help you out with it. We will get you to where you want to be. :)

No items found.