Mini Menu above links in primary menu

[ROBIN]

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.

 

[scrambler]

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

[Weaver]

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.

[ROBIN]

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?

[scrambler]

I am not following.

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

[ROBIN]

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.

[scrambler]

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

[Weaver]

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.

[ROBIN]

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

[scrambler]

Add the rules below

#branding {z-index:10010;}

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

 

 

[ROBIN]

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.

[scrambler]

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;}

 

[Author]

Posts