Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 29, 2016 at 9:47 am #692992
    Blueberry007

    Hi,

    I have the following settings for the header in the Enfold Theme:

    logo:left
    menu:right

    (just like the header of this forum:)

    screenshot1

    Reducing the window size (just before the breakpoint for mobile devices) leads to an overlap of the menu and the logo (happens the same with the header of this forum)
    Would it be possible to place the logo on top of the menu for this situation?

    screenshot2

    • This topic was modified 8 years, 2 months ago by Blueberry007.
    September 29, 2016 at 9:59 am #693008
    Basilis

    Hi Blueberry007!

    That is possible, but what is the window size for that?
    Is that for tablets? and it should be on center?

    Please provide us more details and a screenshot

    Best regards,
    Basilis

    September 29, 2016 at 10:17 am #693024
    Blueberry007

    Thank you for the quick reply.
    Well, the problem is that the site is still under development and the menu structure (and so the width) is not completely determined

    But the same problem happens with your site:
    kriesi.at

    From width 862px to 767px there is an overlap

    screenshot3

    (in my case for the moment from 980px to 767 px)

    I would like for this situation the menu aligned left and the logo on top of it (also aligned left)

    Thanks for the help!

    September 29, 2016 at 10:26 am #693031
    Jordan

    Hi,

    Thanks for reaching out to us!

    Regarding the overlapping issue, please refer to this post – http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/ and if that does not help, please see – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    If that does not help, please create a temporary admin login and post it here privately.

    Best regards,
    Jordan

    September 29, 2016 at 11:50 am #693059
    Blueberry007

    Thank you! It works: combining both solutions, the logo is in line with the menu and there is no overlap.

    However, is it possible to put the logo on top of the menu for the case when I don´t want to show the mobile menu yet and there is an overlap.

    For example for your site kriesi.at: a solution for the overlap at screen widths between 862px to 767px.
    What would be the css code (for the Enfold Theme)? Or is it not that simple?

    September 29, 2016 at 11:54 am #693061
    Jordan

    Hi,

    I’m not sure I completely follow. What do you mean by put the logo on top of the menu? Do mean you would want the logo placed above the nav menu in a situation like that where it overlaps?

    Best regards,
    Jordan

    September 29, 2016 at 12:03 pm #693062
    Blueberry007

    I’m sorry if I confuse you ;-)
    Yes, the logo placed above the nav menu, like:

    screenshot2

    • This reply was modified 8 years, 2 months ago by Blueberry007.
    September 29, 2016 at 2:13 pm #693104
    Vinay

    Hi,

    One work around to this issue is to trigger the mobile menu just before the menu start to run into the logo. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    Adjust the @media max-width value to suit your design. It should be just a little more of the browser width than when the menu start to run into logo.

    @media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}

    If yous till have any issue please share a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    September 29, 2016 at 4:48 pm #693228
    Blueberry007

    Ok, thanks!

    • This reply was modified 8 years, 2 months ago by Blueberry007.
    September 30, 2016 at 3:11 pm #693807
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 1150px) and (min-width: 768px) {
.logo a {
    max-width: 50%;
    max-height: 100px;
}
.main_menu {
    left: 0;
}}

    Then edit your main menu links and remove background color so logo would be visible.

    Best regards,
    Yigit

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