Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 17, 2014 at 1:52 am #252378
    snackd

    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.

    April 17, 2014 at 1:54 am #252379
    snackd

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

    April 17, 2014 at 1:26 pm #252659
    Yigit

    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://kriesi.at/documentation/enfold/updating-your-theme-files/

    Cheers!
    Yigit

    April 25, 2014 at 11:24 am #256030
    snackd

    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

    April 25, 2014 at 4:46 pm #256198
    Yigit

    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

    April 26, 2014 at 2:58 am #256418
    snackd

    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.

    April 26, 2014 at 11:52 am #256539
    Ismael

    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

    July 3, 2014 at 9:32 pm #286876
    snackd

    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

    July 3, 2014 at 11:13 pm #286928
    Josue

    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

    July 4, 2014 at 6:20 pm #287323
    snackd

    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:

    July 6, 2014 at 4:43 am #287631
    Ismael

    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

    September 25, 2015 at 10:23 pm #509291
    thebandmorphin

    Hello,
    I also would like my menu to wrap before the logo.
    With the code above it does, but the second line is far below inside the slider.
    What would I have to edit to make it work better?

    My page is http://morphin.org

    Regards,
    Florian

    September 26, 2015 at 12:07 am #509319
    Josue

    Hey Florian!

    Can you post a screenshot/mockup of what would you want to achieve?

    Best regards,
    Josue

    September 26, 2015 at 11:35 am #509449
    thebandmorphin

    Hello Josue,
    I made screenshots of how it is without any css changes, with the change in Ismael’s post and of how I would like it to appear.

    Hmm, can’T get a direct image link working, so here as normal link:
    http://morphin.org/?attachment_id=612
    Regrads,
    Florian

    September 26, 2015 at 12:24 pm #509470
    Josue

    Ok, i think there’s a way to this but you’d need to sacrifice the header shrink or stickiness (Theme Options > Header > Header behavior).

    Best regards,
    Josue

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.