WordPress.org

Ready to get started?Download WordPress

Forums

Weaver II
Header/Menu side-by-side (20 posts)

  1. bradleysowash
    Member
    Posted 6 months ago #

    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/

  2. scrambler
    Member
    Posted 6 months ago #

    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

  3. bradleysowash
    Member
    Posted 6 months ago #

    That is getting closer... 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;}

  4. scrambler
    Member
    Posted 6 months ago #

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

  5. bradleysowash
    Member
    Posted 6 months ago #

    That worked! Thank you - I've spent hours trying different codes.

  6. scrambler
    Member
    Posted 6 months ago #

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

  7. bradleysowash
    Member
    Posted 6 months ago #

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

  8. bradleysowash
    Member
    Posted 6 months ago #

    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.

  9. scrambler
    Member
    Posted 6 months ago #

    #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

  10. bradleysowash
    Member
    Posted 6 months ago #

    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.

  11. scrambler
    Member
    Posted 6 months ago #

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

  12. bradleysowash
    Member
    Posted 6 months ago #

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

  13. scrambler
    Member
    Posted 6 months ago #

    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

  14. bradleysowash
    Member
    Posted 6 months ago #

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

  15. scrambler
    Member
    Posted 6 months ago #

    This is not the rule I am speaking of...

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

  16. scrambler
    Member
    Posted 6 months ago #

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

  17. bradleysowash
    Member
    Posted 6 months ago #

    It worked!!!!!!! Thank you, thank you...I need to dive deeper into my CSS understanding.

  18. scrambler
    Member
    Posted 6 months ago #

    These z-index can be a pain :)

    The last thing to remove to align the menu and the image is
    #nav-bottom-menu {margin-top:-30px;}

  19. scrambler
    Member
    Posted 6 months ago #

    You also need to adjust the margin left from 210 to 280px in the rule
    .menu-add {margin-left:280px !important;}

  20. scrambler
    Member
    Posted 6 months ago #

    I also see you may need different values for the left margin on different pages, you can do that by adding the page id class to a new rule like for the about page
    .page-id-30 .menu-add {margin-left:400px !important;}

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.