Home Forums Weaver Xtreme Theme Creating Static Header / Menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17902
    xcskier99
    Participant

    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.

    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.
    #22716
    Weaver
    Keymaster

    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.

    #22717
    scrambler
    Moderator
    #22718
    xcskier99
    Participant

    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!
    #22719
    scrambler
    Moderator

    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

    #22720
    xcskier99
    Participant

    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.   

    #22721
    scrambler
    Moderator

    ??

    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 🙂

    #22722
    scrambler
    Moderator

    @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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.