Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 12, 2021 at 2:39 am #1293820
    aussiedropbear

    Hi support,

    I have a slightly expanding menu which has now started to encroach to the logo area.

    Is there some way i can keep the two separated and/or have this areas width increased to prevent this from occurring in PC and laptop view?

    Thanks
    John

    April 12, 2021 at 6:04 am #1293845
    aussiedropbear

    Hi support,

    I think I may have figured this out with the following:

    @media only screen and (min-width: 1550px) {
    .html_header_top #top .av_header_stretch .container {
    width: 1450px;
    }
    }

    Let me know if you think I need to change anything but for now it has moved the menu wider and the logo has kept its distance.

    Would I need to add anything for smaller screen?

    Thanks
    John

    April 13, 2021 at 4:04 pm #1294153
    Yigit

    Hi John,

    Thanks for contacting us!

    I added following code to bottom of Quick CSS field

    /* Activate burger menu */
 @media only screen and (max-width: 1492px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

    Now mobile menu is activated on screens below 1492px – https://kriesi.at/documentation/enfold/menu/#toggle-id-87.

    Please review your website :)

    Best regards,
    Yigit

    April 15, 2021 at 5:44 am #1294474
    aussiedropbear

    Thanks Yigit.. that definitely helps.

    I am now trying to close up logo and menu as they seem to be placed to the far left and right of the screen? Is this a result of my code:

    @media only screen and (min-width: 1550px) {
    .html_header_top #top .av_header_stretch .container {
    width: 1450px;
    }
    }

    I would like to have them positioned more to the centre of the screen relevant to one another. see image in PC..

    Thanks
    John

    April 17, 2021 at 6:28 am #1294873
    Rikard

    Hi John,

    If you make the container wider, then the logo and menu will further apart, yes. Maybe you could simply try a lower value than 1450?

    Best regards,
    Rikard

    April 19, 2021 at 12:17 am #1295050
    aussiedropbear

    Thanks Rikard.

    I tried playing around with different dimensions and still no joy. I even removed my code to see what it would do and it still had no effect? I have left that code off for now.

    I have no idea now why its behaving this way and the logo is to the far left and the menu to the right including the top bar information?

    I tried also changing the layout so that the logo is centered and menu below. This worked but when changing back I still have the same issue? I noticed that when the logo/menu was centered the top bar did not; it stayed to the right.

    Thanks
    john

    April 21, 2021 at 5:51 am #1295671
    Nikko

    Hi John,

    It’s because the layout is set that way, since you want it more centered, please try adding this CSS code in Quick CSS:

    .html_header_top #top .av_header_stretch .container {
    max-width: 1480px;
}

    Best regards,
    Nikko

    April 21, 2021 at 9:20 am #1295727
    aussiedropbear

    Many thanks Nikko.

    That did the trick.

    Cheers
    John

    April 21, 2021 at 11:30 am #1295777
    Nikko

    Hi John,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Logo overlapping menu’ is closed to new replies.