Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #252378

    I just updated my menu and it now has a lot of items. Initially it was going over my (left-aligned) logo. When I resized my browser window to be smaller, it eventually disappears entirely — and is not replaced by a mobile-menu icon or anything. I’ve seen some other posts about this, and many of them instruct me to change the options in Enfold theme options > Header > Mobile Menu > Header Mobile Menu but I do not see this option?

    What I’m going for is a logo on the left side of the header and menu taking up the rest of the width to the right side – both centered vertically on the same horizontal line. I guess I’m thinking if the menu gets too long it would wrap into a second line, rather than bleed over the logo. But the most concerning thing is when it completely disappeared!

    Thanks.

    #252379

    here’s my site, if that helps.
    http://bit.ly/1l4nMYV

    #252659

    Hey!

    Please update Enfold to the latest version 2.6.4 to have more control over header options and make the theme compatible with WordPress 3.9 – http://www.kriesi.at/documentation/enfold/updating-your-theme-files/

    Cheers!
    Yigit

    #256030

    Thanks, Yigit. Your theme update notification does not seem to be working in WordPress, it said the theme was up to date. (I’m pretty sure that my Themeforest creds are correct. Is there just somewhere that I can check periodically and see what version of Enfold is current? It seems like you update it very frequently, which is great…..)

    Anyway, I’ve updated to 2.7 now. I’ve looked over the header display options. And I don’t see how to keep the menu from overlapping the logo. Is there a way? I don’t really want to start editing your menu CSS, because it’s so beautiful and feature-rich.

    Thanks

    #256198

    Hi!

    Please see – https://vimeo.com/91837491
    Please add following code to Quick CSS

    @media only screen and (max-width: 1140px) {
    .av-main-nav > li > a {
    padding: 0 5px;
    }}

    I see that you have added the code with different values but on your case, this should work. Also Enfold theme options > Header > Mobile Menu > Header Mobile Menu should be now available on your end. Please choose 990px
    Cheers!
    Yigit

    #256418

    Yigit, I more or less already tried that and it’s not working. You can see it now. The menu is still overlapping the logo.

    Any other suggestions? Ideally a longer menu would wrap into two lines or something. Let me know if you need a better explanation of my issue or goals.

    Thanks for your help.

    #256539

    Hey!

    Thank you for the update.

    Please make sure that you choose the second option on Header Mobile Menu activation. If that doesn’t work, please use this on Quick CSS or custom.css:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 7px;
    }
    
    .av-main-nav > li > a {
    font-size: 11px;
    }
    }

    Regards,
    Ismael

    #286876

    Hi there. That doesn’t seem to fix the problem.

    It seems like what you’re saying is that the only way to fix the menu overlapping the logo is to set a @media rule that defines a minimum page width before the mobile menu kicks in. Is this correct?

    This is okay, but it means that that I’ll have to change the CSS every time the menu content is updated. I’d rather have some CSS that keeps
    nav.main_menu from overlapping strong.logo. Perhaps if strong.logo was a <div> instead?

    Regards,
    josh

    #286928

    Hi Josh!

    That would make the logo being on top and the menu below, if you want that behavior you can select that in the Theme Options:

    Alternatively you can make the toggle appear sooner, try with this code in Quick CSS:

    @media only screen and (max-width: 989px) {
    .main_menu, #header_main_alternate{display:none;}
    .container #advanced_menu_toggle, #advanced_menu_hide{display:block;}
    #mobile-advanced{display:block;}
    }
    

    Best regards,
    Josue

    #287323

    No, not trying to have the menu below the logo. The problem is this:

    The menu overlaps the logo. I’d like menu to never go further left than the right edge of the logo. So it would look like this:

    Is there a way to do this?

    Also, I’m not trying to expedite the appearance of the mobile menu. I much prefer the text menu. Ideally, it would wrap into a second line — like this:

    #287631

    Hey!

    Thank you for the update.

    You haven’t change the setting on Enfold > Header Layout > Mobile Menu panel. Look for the Header Mobile Menu Activation then choose the second option in order to show the mobile menu earlier. Add this on Quick CSS or custom.css:

    nav.main_menu {
    width: 70%;
    }
    
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
    line-height: 30px !important;
    height: 30px !important;
    }
    }

    This should wrap the other menu items on a second line.

    Cheers!
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.