How to Make Header Overlap Menu Bar

could it be resolved by changing the opacity of the nav bar? here is a little code declaration try it out and see if you’re happy with the result ?? play around with the value.

#site-navigation, #site-sub-navigation {
opacity: 0.85;
}

Jess thanks so much for answering and thanks for the code snippet!

Making the nav bar more transparent doesn’t solve it. What I want is for the flowers in the header to overlap/appear in front of the black the menu bar. (When I manage to do this I will re-design the header so that one or two flowers dip down onto and below the navigation bar.) So I need the header to appear in front of the nav bar. Any further ideas gratefully appreciated!!

I guess the simple solution is not to use a header image with a background colour and instead to leave it transparent.

Oh my goodness! I was certain my image had a transparent background!! But Andrew your post made me check – and it wasn’t! What a silly mistake! Thanks so much! Could anyone please advise how to space out the menu items to allow for the flowers to sit in between? Thanks so much! Deborah

could anyone please advise how to space out the menu items to allow for the flowers to sit in between?

That’s pretty difficult. You’d think you can just move the menu items left, but because people can set their own font size and style in browsers or device settings you’d never know the absolute width of menu items. The widths would change. You wouldn’t know how far left/right to move the menu items.

Oh I see….. So even though this site looks amazing in my browser – https://john-messenger.com/ – you’re saying that in another person’s browser the image might not sit in the right place relative to the menu titles?

Thanks so much for your help!

Deborah

Yeah, I’m not short-sighted but I increased the font size on that site by 40% to see what it would be like and it sort doesn’t work as expected: https://snag.gy/ygVOW.jpg

I see what you mean. Actually I see that playing around with the viewing size can muck up all sorts of things. The slide show only fits perfectly into its frame at a certain font size. Food for thought…. Thanks Andrew.

Help! Now I have my transparent header overlapping the menu as I wanted. It looks good but I’ve just realised that it disables the menu! Is there any way round this?

https://www.photomobil.co.il/

Thank you!

Deborah

That problem will remain as long as you have the header image on top of the navbar.

The only way I can see this working is if you instead create images for each menu item that consists of both the black background colour and flower, using the CSS sprite technique.

Ok, thank you! The sprite technique could work for me because I only need the images to overlap the menu bar slightly. But I’m not succeeding in doing this. This is what I have added to style.css:

img.home
{
width:70px;
height:75px;
background:url(“https://www.photomobil.co.il/wp-content/uploads/2013/11/sprite-flowers.png”) 479 126;
}

I used GetSprite for the size and positioning. I’m sorry I’m not au fait with CSS. Could you please advise?

Thank you in advance!

Deborah

Try putting “px” on the end of your numbers, “479” and “216”, but you need to target the individual menu items and not “img.home”.

For example,

#menu-item-85 {
 background:url("https://www.photomobil.co.il/wp-content/uploads/2013/11/sprite-flowers.png");
}

The image itself should have little white space so that you can find your flowers or butterflies easily, for example see this sprite: https://www.alexmourer.com/wp-content/uploads/2013/09/css-sprite.png

Make sure you also apply the black bar behind in the sprite – this is the only way you’ll get the flowers on top of the black bar (in the image editing software you’re using).

As you already have a black bar in your sprite image you need to remove it from the <nav> element, e.g:

#site-navigation {
 background: none;
}

You’ll notice there’s now a white gap before your first menu item “English” because the <nav> element doesn’t have the black bar style. To get this black bar back try this style:

#site-navigation li:first-child:before {
 content: "";
 position: absolute;
 left: -353px;
 top: 0;
 width: 352px;
 height: 100%;
 background: #333;
}

Everything should be put within a media query so that you don’t affect the mobile menu (I assume you don’t want that to have this styling).

Thanks for the instructions. I did as you suggested:

#menu-item-78
{
width:25px;
height:22px;
background:url(“https://www.photomobil.co.il/wp-content/uploads/2013/11/sprite-flowers.png”) -14px -68px;
}

And indeed the flower showed up on the menu bar and was clickable, but the menu bar became deep and skewed off to the right of the page. Maybe it’s just a question of playing around with the positioning but I’m thinking this method won’t work for this issue because I wanted the flowers and butterflies to just overlap the menu bar a little, as they do here: https://www.photomobil.co.il/ (looks how I want it but menu is disabled). With the method you suggested the whole flower appears on the button, which is not what I wanted. Is there any way I can place these sprites in my theme, as they appear at the moment, slightly overlapping, without disrupting the menu bar?

Thanks so much for your help.

Deborah

This can be possible using the techniques I suggested, but it is complicated to implement and I would recommend hiring someone to do it for you:

https://jobs.wordpress.net
https://directory.codepoet.com