How to Create a Fixed & Fluid Navigation Menu Bar in Headway 3?
Many Headway Themes 3 users are interested to create a fixed navigation menu bar for theirs
sites. The main reason is they want to keep the navigation fix so that it is
easily accessible on every page.
However, there seem to be no direct answer given by Headway
team. Below are the steps you can actually achieve it without too much hassles.
- Log into your WordPress dashboard.
- Create some pages with long content so that you can test the scrolling with the fixed navigation menu later.
- Hover over “Headway” and go to “Visual Editor”.
- If you are visiting “Visual Editor” for the first time, you are presented with a “Grid Wizard”.
- It contains a few options of preset layout, click one layout you like and click the button “Finish” to continue.
- Immediately, your grid is displayed with the preset blocks.
- Now, drag the navigation block above the header block and adjust the spacing.
- Click the green “Save” button on the top right corner to save.
- Click on the “Design” tab on the top left corner to go to design mode.
- For best illustration purpose, the background of the navigation block has changed to black color and the text to white color.
Bring the Navigation Menu Bar to the Top
- Now we are ready to bring the navigation menu bar to the top of the browser.
- We need to use Live CSS to achieve this.
- Find out the “block ID no.” of your navigation block by hovering over your block. A little grey box will appear showing you its ID number.
- In this example, the navigation block is #block-2.
- Copy
the following CSS code & paste into your Live CSS editor.
/*MOVE
MENU BAR TO THE TOP & FIXED WHILE SCROLLING*/
#block-2
{
position: fixed;
left:0;
top:0;
overflow: hidden;
z-index: 5;
}
- Do a save and you can see in the browser now the navigation bar has already moved to the top.
- If your header is a bit too close to the navigation bar, you can add the following code to give more spacing between them.
/*GIVE
MORE SPACE BETWEEN THE MENU & HEADER*/
.block-type-header
{ margin-top:50px; }
Align Navigation Menu
Items to the Right
- You may realize there is one problem - all the navigation items are aligned to the left.
- To align them to the right, you add a CSS code to do it.
/*MOVE
THE MENU ITEMS TO THE RIGHT*/
.block-type-navigation
.nav-align-left ul { text-align:right; width:79%;}
- To prevent the menu items move to the extreme right of the browser, we need to reduce the width (width:79%) a little bit so it can fit nicely within the navigation bar.
By using the above CSS code, it will not only give you a fixed navigation menu bar but also a fluid one. The navigation menu bar will
auto adjust itself according to the size of the browsers.
Hope the above can help you to achieve your dream fixed navigation bar. If you have a better way to achieve this, please share it at the
comment below.
Hey I was able to get it working and it looked great on a computer browser but when I viewed it on a mobile browser, the nav bar hides the header under it because I have a lot of items in the nav bar. Can you tell me how to fix that please
ReplyDeleteMay be you can try putting the z-index for your header higher than your navigation bar.
ReplyDeletehey! this was super helpful. is there a way to make the navigation bar fluid but NOT fixed? (i tried removing the position:fixed line from the css but it didn't work). thanks!
ReplyDelete@clara The navigation bar should be fluid, it will scale according to the device you used unless you meant other thing.
ReplyDeleteThanks for this Walkthrough, It achieved exactly what I wanted, except that my menu dropdowns no longer function (submenus). When I mouse over the menu item that contains the sub item, it reads the hover intent (the menu item flashes to hover state then off)but the submenu does not appear. Thoughts?
ReplyDelete