Creating static menu across the top

[Kymone Hinds]

I would like to amend the front page of my site.
I want to put a menu across the top that stays static even as people scroll down the page. How do I do that?

[Bill Robbins]

Thank you for posting this as a separate topic. I do appreciate it.

You can fix the logo/navigation bar to the top of the screen. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header {
   	position: fixed;
   }
   

3. Update your settings.

That should cause it to stay in place as you scroll. Let me know if you have any questions.

Bill

[Kymone Hinds]

How can I get the menu options back at the top and remove them from that area in the welcome section?

[Bill Robbins]

Go to Appearance > Menus in your WordPress dashboard. Click on the locations tab on that screen. Use the drop downs there to assign your navigation menu to the theme’s menu location. Then save your changes.

Next edit your welcome widget. There is a drop down menu there to select a navigation menu. Use that drop down to change it to “none” and save your changes.

[Kymone Hinds]

How can I run a bar across the top with a background like this example so the menu options can be more visible? And take off the color for the drop downs?

http://eastsidestudents.com/

In this example it seems to be even above the hero image? How can mine look like this?

[Bill Robbins]

Instead of the snippet above you would add something like this:

#header {
	position: fixed;
	background-color: #000;
}

#hero-section {
	top: 100px;
}

The background color is the #000 in that snippet. Change that to the color you’d like to use for the header background. That should also move the hero area down below the header. You can adjust its vertical position by changing the 100px in that snippet. Smaller numbers will move the hero section closer to the top. Larger ones will move it further down. Play around with that until you find the right fit for you.

---

To make the drop-down menus not have a background color, add this to your Custom CSS:

#header nav#top-menu ul li:hover ul {
	background: transparent;
}

[Author]

Posts