Title: Header/Menu side-by-side Last modified: August 21, 2016 --- # Header/Menu side-by-side * [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/) * I’m using the weaver ii theme. I’m trying to edit the css or html to make my header image and menu lay within the same plane, side-by-side aligned with each other. I’ve tried so many things. Please help. * I’m redesigning this site and would like to keep the general feel of the logo next to the menus….[http://www.collegeliftoff.com/](http://www.collegeliftoff.com/) Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/headermenu-side-by-side/page/2/?output_format=md) [→](https://wordpress.org/support/topic/headermenu-side-by-side/page/2/?output_format=md) * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652772) * 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 * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652791) * That is getting closer… [http://test.collegeliftoff.com/](http://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;} * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652823) * 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;} * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652838) * That worked! Thank you – I’ve spent hours trying different codes. * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652840) * in the future, you may want to post directly in weaver’s forum [http://forum.weavertheme.com/](http://forum.weavertheme.com/) * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652843) * Actually now that I go back and test things, I cannot click on any of the menus. Take a look: test.collegeliftoff.com * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652844) * 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. * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652850) * #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 * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652851) * 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. * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652852) * 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;} * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652854) * After removing those pieces of css – the menu reappeared above the header image….? * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652855) * 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 * Thread Starter [bradleysowash](https://wordpress.org/support/users/bradleysowash/) * (@bradleysowash) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652857) * I pulled out this: #nav-bottom-menu .menu_bar {position:relative;top:-38px;} * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652858) * This is not the rule I am speaking of… * can you see a rule #wrap-header #nav-bottom-menu {position:relative;z-index: 95;} * [scrambler](https://wordpress.org/support/users/scrambler/) * (@scrambler) * [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/#post-4652859) * If you really cannot find the rule, add the one below to cancel it #wrap-header# nav-bottom-menu {z-index:auto;} Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/headermenu-side-by-side/page/2/?output_format=md) [→](https://wordpress.org/support/topic/headermenu-side-by-side/page/2/?output_format=md) The topic ‘Header/Menu side-by-side’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/weaver-ii/2.1.12/screenshot.png) * Weaver II * [Support Threads](https://wordpress.org/support/theme/weaver-ii/) * [Active Topics](https://wordpress.org/support/theme/weaver-ii/active/) * [Unresolved Topics](https://wordpress.org/support/theme/weaver-ii/unresolved/) * [Reviews](https://wordpress.org/support/theme/weaver-ii/reviews/) * 19 replies * 2 participants * Last reply from: [scrambler](https://wordpress.org/support/users/scrambler/) * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/headermenu-side-by-side/page/2/#post-4652863) * Status: not resolved