Creating Static Header / Menu

[xcskier99]

I am trying to create a static (doesn’t move when I scroll down the page) header and top menu.  I am using Weaver Xtreme Plus; I have attempted to put the code shown in the header and on individual pages.  Unfortunately, I can’t get it to work.

http://www.andreagordonitpro.com

I had the site set but have decided to do some more with it.  

Apologies for asking the same question that’s been asked before.

[Weaver]

You can use the “Fixed Browser Top/Bottom” HTML insertions areas on the Advanced Options : HTML Insertion tab. You need to use regular HTML in those areas, and account for their vertical size by top/bottom padding on your pages.

[scrambler]

Read Item #4 in this post

http://forum.weavertheme.com/discussion/10739/weaver-xtreme-tips-and-tutorials-part-4#Item_1

[xcskier99]

Ok, now I really feel dumb — when I looked there was some code on my site; I took most of it out except for:

/*fixed header*/

#wrap-header {

position:fixed;

width:100%;

max-width:100%;

z-index:999;

}  

#nav-top-menu {position:fixed;}

That only made the menu stay in place on the home page; not on the other pages.  I then removed the code and it’s still doing that!

[scrambler]

I wonder why you ask questions here if you are not going to read the answers…

The CSS code you are using is for weaver II, it does not work on Xtreme as the classes are different you need to remove it all

The easiest way to do what you want on Xtreme given you have plus, is to build the header and menu in Advanced options > HTML Insertion > Fixed top Area.

Inside that box you put the HTML for your header image and an extra menu shortcode for the Menu bar.

And you hide the standard header and menu bar using the “Hide Area” Option in Header and Menu options pages.

Once thing you did not say is if you also want these to be fixed on mobile or not… 

Once that is in place, we can help fine tune it

You may also want to read the similar discussion here http://forum.weavertheme.com/discussion/12299/header-menu-bar-positioning-fixed-browser-top

[xcskier99]

I’m sorry scrambler, I’m not as advanced as you are.  I’ll just leave it as is with a menu at the bottom.   

[scrambler]

??

What does that have to do with anything? I am telling you the CS you used does not apply to Xtreme, and we are giving you the method to do what you want.

if you are having difficulty understanding or implementing the solution, then tell us what part you don’t understand or have a problem with, and we can walk you through it.

We cannot solve things you don’t express 🙂

[scrambler]

@xcskier99

For example and as explained in the other thread I mention discussing a similar request

Put the code below in Advanced options > HTML Insertion > Fixed Browser top box (this will add the header and menu bar in the fixed area on desktop only)

[show_if device='desktop'][header_image]
[extra_menu menu_name='yourmenuname' menu_style='primary' menu_type='standard']
[/show_if]

replacing yourmenuname by the name of the custom menu used as primary

Add the rule below to Main Options > FOnts & Custom > Custom CSS Rule box to make space for the fixed header on desktop
.is-desktop #wrapper {margin-top:150px;}     

replacing 150px with a value that matches your fixed header height

Then  select “Hide Desktop” in Main options > Header > Header Area > Hide Area drop down list to hide the regular header on desktop, so only the fixed area shows in that mode.

[Author]

Posts