Home Forums Weaver Xtreme Theme Mini Menu above links in primary menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #70966
    ROBIN
    Participant

    I have the primary menu fixed to the top of the website.  I have tried to put the mini menu above the fixed menu but everything I try puts it below the primary in one way or another, obviously because it is fixed to the top.

    I know this is kind of a weird question, but my menu bar is so tall, I am wondering if there is a setting to put the mini menu inside the menu bar, aligned right above the links?  I know I would have to move the primary links down some, but I think that would be ok.

    The site is https://advancedlsperformance.com/

    Thanks for any help you can offer.

     

    #70967
    scrambler
    Moderator

    Activate the mini menu and I will check if I can come up with CSS to do that

    #70968
    Weaver
    Keymaster

    Since you seem to need to add additional content to the fix to top area, and I believe you have Weaver Xtreme Plus, here’s a completely different approach:

    To the Header -> Header Area -> Add Classes (customizer view) add the class: wvrx-fixedtop

    That will pin the entire header to the top. You can fiddle with all the header area items like the mini menu, and they will all be pinned to the top.

    Right now, you don’t seem to be using many of the Header Area content items like title, etc., so this approach might work for you for everything except the header image.

    Then to handle your truck header image, add its HTML <img>link to your  media library</img> code directly to the HTML Injection -> HTML Injection Areas -> Post Header injection area, perhaps with the Weaver wide / full width classes to make it full width. It will appear above all your content.

    #70969
    ROBIN
    Participant

    I can’t leave the truck up until I have it coded correctly.  The client is sending people to the site already.

    In the Custom CSS area  I used this code

    #inject_postheader (wvrx-fullwidth}

    It didn’t work.  Can you help me tweak it?

    #70970
    scrambler
    Moderator

    I am not following.

    You were speaking of the mini menu, and now of the inject post header area?

    #70971
    ROBIN
    Participant

    Hi Scrambler

    I was working on this part of Weaver’s comment above.

    Then to handle your truck header image, add its HTML link to your  media library</img> code directly to the HTML Injection -> HTML Injection Areas -> Post Header injection area, perhaps with the Weaver wide / full width classes to make it full width. It will appear above all your content.

    #70972
    scrambler
    Moderator

    I am not sure you need to mess with that as when you fix the whole header to the top, the menu as it is will be part of it.

    So I would try the following.

    Change the menu fixed option to NOT fixed

    Instead Add the class wvrx-fixedtop to the header area class box to fix the whole header

    Then activate the mini menu

    Then we will need to add some CSS to adjust the position of the mini menu above the menu

    #70973
    Weaver
    Keymaster

    You have to add the class via the add class options. There is no way to add the class directly as your

    #inject_postheader (wvrx-fullwidth}

    example. The theme has to add the class. It can’t be done manually.

    #70974
    ROBIN
    Participant

    @Scrambler

    Can we go back to some CSS to move the mini menu inside the Menu area?  It seems like that might be the most direct option?  I appreciate you very much.  I activated the mini menu


    @Weaver

    Thanks, I will want to visit this option for other sites at some point.  I appreciate your help and this amazing Theme!

    #70975
    scrambler
    Moderator

    Add the rules below

    #branding {z-index:10010;}

    #nav-header-mini {position:fixed;top:10px;right:30px;}

     

     

    #70976
    ROBIN
    Participant

    That worked great EXCEPT there should be 3 sub pages under Headers and Exhaust and the last one isn’t showing.  If I remove the code you gave me it shows back up.  It must be hiding behind the Header image.  It is kind of cool that the menu goes behind the header image as it scrolls and then shows back up once you scroll past the header, but I imagine that is the problem, LOL

    I can’t use the mini menu for phones and tablets in this way because it hides the hamburger menu, but I can work with that.

    Any ideas?

    I really appreciate your help.

    #70977
    scrambler
    Moderator

    Sorry I missed that…

    The problem is the header mini menu and the header image are in the same container, so they are either both over the menu or both under.

    So we cannot use the header mini menu for what you want.

    Assuming you have the Plus plugin, use an extra menu shortcode to add a Header mini menu inside the Pre wrapper HTML Insertion area and add the CSS below to the area BG CSS+ box

    {position:fixed;z-index:10010;top:30px;right:20px;}

     

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