Header/Menu side-by-side

If the link you provided is what you want it to look like, you can put the code for your image in Main options > Menus > Add HTML To menu bar section > Add HTML To left box.

After that if you need help fine tuning, we need the link to your page so we can be more specific

That is getting closer… https://test.collegeliftoff.com/

The image is now the same size as the menu. See link.

The image in the background is embed through the Header Horizontal widget. This is in my custom CSS rules box to back that image and menu overlap. The problem is it’s the wrong overlap.

.menu_bar div {float:right;margin-right:5px;}

#nav-bottom-menu {margin-top:-30px;}

#nav-bottom-menu .menu_bar {position:relative;z-index:500;top:-38px;}

#sidebar_header {overflow:visible;}

#sidebar_header .header-widget {padding-bottom:0;margin-bottom:0;}

If what you mean is that you want the image in the Horizontal header widget area to be above the menu bar, the #branding has a z-index of 2 , and #nav-bottom-menu has one of 95, so you need to add the following to the Custom CSS Rule box

#branding {z-index:100;}

To clear that. I believe your z-index:500 rule has no use so you can get rid of it.

But this is not a responsive design. If you shrink your browser size, you will see the content of your menu bar slide under the image and disappear.

To avoid that problem, also add

.menu-add {margin-left:210px !important;}

That worked! Thank you – I’ve spent hours trying different codes.

in the future, you may want to post directly in weaver’s forum
https://forum.weavertheme.com/

Actually now that I go back and test things, I cannot click on any of the menus. Take a look: test.collegeliftoff.com

I suppose the real goal would be for the header image/logo to overlap the menu instead of a widget area – which is what I’m using now.

#sidebar_header {overflow:visible;}
#sidebar_header .header-widget {padding-bottom:0;margin-bottom:0;}

yes and this is because you used the Horizontal header widget area. You must have read a post I made on the Weaver forum because you added
#sidebar_header {overflow:visible;}
#sidebar_header .header-widget {padding-bottom:0;margin-bottom:0;}

which is to remedy an overlay issue with that widget area, but because you are actually bringing your menu up over the widget area, it does not suffice.

The best would be to simply use the header image. You can use the same image and check the option in MAin Options > HEader > Header Image > Use actual image size
Just getting rid of the Header Horizontal Widget area and putting your image as the header image may be all you need, or we may need to re tweak the menu.

It will be easier to see once you have the header image in place

The coding still works with the header – I need to adjust my image so it adjusts left…but I still cannot click on the menu.

first select position left in MAin Options > HEader > Header Image > Image Layout drop down list

Then I think you are the one who added
#wrap-header #nav-bottom-menu {position:relative;z-index:95;}

You need to remove that rule and instead add
.menu_bar div {position:relative;z-index:200;}

You should also be able to remove the rule
#branding {z-index:100;}

After removing those pieces of css – the menu reappeared above the header image….?

You still have the rules
#wrap-header #nav-bottom-menu {position:relative;z-index:95;}

Did you add that rule as I don’t believe it comes from weaver. It would either be in the Custom CSS Rule box, or one of the CSS+ boxes in the menu page

You need to remove that

I pulled out this: #nav-bottom-menu .menu_bar {position:relative;top:-38px;}

This is not the rule I am speaking of…

can you see a rule
#wrap-header #nav-bottom-menu {position:relative;z-index:95;}

If you really cannot find the rule, add the one below to cancel it
#wrap-header #nav-bottom-menu {z-index:auto;}