Menu over Header Image

[ROBIN]

Hi Friends

This is for my website  http://www.bellaann.com

The client wants an entire new website design, but I am starting with this issue:

Chat GPT and I have spent some time trying to figure out how to move the menu over the header image.  Here is what it told me to say:  “I want the primary menu (.wvrx-menu / #menu-primary) to overlay on top of the header image instead of appearing below it. I’ve tried absolute positioning but the theme structure seems to override it. Is there a built-in option or the correct wrapper to target?”

When we were trying to make it happen I clicked the box for the menu to be in standard position.  I can’t actually leave it that way right now or it looks weird, so I moved it back to the top.

Here is the Code it had me use the last time:

`/* Make header the anchor */
#header, #masthead {
position: relative;
}

/* Move the ENTIRE menu over the header image */
.wvrx-menu,
.wvrx-menu-clear {
position: absolute !important;
top: 40px; /* adjust this */
left: 0;
width: 100%;
z-index: 9999;
background: transparent !important;
text-align: center;
}

/* Style menu text */
.wvrx-menu a {
color: #ffffff !important;
font-weight: 600;
}

I appreciate any help you can provide

[scrambler]

You need to elaborate .

You have a fixed top and full width menu will that remain?

Are you planning / wanting to remove the menu background and just move the text items over the header image?

Because if not then graphically having the menu area over the header image is the same a cutting of the top part of the header image….

[ROBIN]

Thank you for your help

The fixed top and full width menu will NOT remain.  I would like the menu to be centered on the top of the header picture.

That leads to the question…. what about pages without a header image?  How would I show the menu for those pages?

Yes, I am planning to remove the menu background and just move the text items over the header image.  I know that would mean that the background setting would be transparent.

Let me know if there is anything else I missed.

Your help is greatly appreciated.

[scrambler]

For me to give you the proper CSS I need everything else in place.

So set the menu as you want it (apart from being above header image) like, background transparent, align center, no fix on top…..

Then I can play with the site and CSS to find the best way to move it over the header image.

And give me a link to a page with no header.

In all likelihood, the rule below will do it under these conditions

#nav-primary {position:absolute; top:20px; width:100%;}

But I may have to tweak it especially for mobile and page without headers

[ROBIN]

That worked beautifully on desk top. Do you have any idea how to handle it for mobile?  I am not really sure what we could do instead, it populates down the page over the other text and makes it look weird.  On a regular site when you click the hamburger icon it creates a space for the links.

I am not worried about no header yet.

Thanks for any help you can give.

[scrambler]

if you dont want it on mobile you can simply modify the rule to limit the change to desktop

.is-dektop #nav-primary {position:absolute; top:20px; width:100%;}

 

[ROBIN]

I think the problem is the transparent background on the mobile application.   It shows over the text of the page.

If I use your code above, where would I style the menu for the rest of the options?  Tablet, phone etc.

Can we do something where it is transparent on desktop, but has a background on everything else?

[ROBIN]

Also can you tell me why it isn’t working on Microsoft edge?

[scrambler]

you can use the rule below to change the background color on mobile

.is-mobile .wvrx-default-menu.wvrx-menu-container{
background-color: white;
}

Regarding Edge, You must be having some caching issues, because on edge the rule is not there, and neither is the setting for transparent background

[ROBIN]

Is there a way to change the menu link color on specific pages?  This client is really putting me through my paces.

Thank you for all your help

[scrambler]

Le menu link color rules are below

.menu-primary .wvrx-menu>li>a {
color: #000
}

.menu-primary .wvrx-menu>li>a:hover {
color: #000000 !important
}

The Easiest way to change it on a per page basis is to add these rules with a different color code in the Page Editing page > Xtreme options for this page > Xtreme Plus > Per page style box

You can also add these rules to the Global custom CSS rule box adding the page selector at the beginning of each rule.

.page-id-xx .menu-primary .wvrx-menu>li>a {
color: #000
}

.page-id-xx .menu-primary .wvrx-menu>li>a:hover {
color: #000000 !important
}

[ROBIN]

Me Again.

When I look at the site on Mobile the white menu area is now covering up the header image.  Is there anyway for the background to be transparent until they click the hamburger menu, then the menu bar opens up with a white background?

I appreciate you.  This really has me perplexed.

[scrambler]

This should do it

.is-mobile .wvrx-default-menu.wvrx-menu-container {
background-color: #fff0
}

[ROBIN]

Now it just stays transparent.  Can you take another look?

[scrambler]

Where did you put it, because the rule is not there.

Make sure you do not have a syntax error in the rule or in the rules before it that would break the CSS file

You can also try

.is-mobile .wvrx-default-menu.wvrx-menu-container {
background-color: transparent !important;
}

[ROBIN]

I put these at the top of the coding so nothing would break it below:

#nav-primary {
position: absolute;
top: 20px;
width: 100%;
z-index: 9999; /* This is the important part */
background: transparent; /* or whatever your design uses */
}

.is-mobile .wvrx-default-menu.wvrx-menu-container {
background-color: #ffffff !important;
}

It puts a white menu area all the way across the page, even before you click the hamburger which looks really bad.

Thoughts?

 

 

[Author]

Posts