Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 18, 2019 at 3:18 am #1092225
    messmeriza

    Hi there,

    When you resize the browser window the menu overlaps the logo. How can I set the logo to scale with the window so that it doesn’t overlap until it’s at phone view? staging.pointgreyfiesta.net

    Thanks,
    Carolin

    April 19, 2019 at 10:25 pm #1092764
    Basilis

    Hey Carolin,

    Thsi is happening because of the size you have.
    The only thing that can be done is to switch the menu to be faster on mobile / burger.

    Best regards,
    Basilis

    April 23, 2019 at 12:03 am #1093443
    messmeriza

    Hi Basilis,

    in Enfold > Main Menu > General it’s already set to ‘Activate for Smartphones … below 990px’
    Where else do I need to change something?

    Thanks!
    Carolin

    April 23, 2019 at 9:21 am #1093584
    Rikard

    Hi Carolin,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1380px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Rikard

    April 23, 2019 at 7:27 pm #1093728
    messmeriza

    Hi Rikard,

    thanks that works. But I wonder if I can set the logo to scale when you scale the browser window like everything else on the page does. Then I wouldn’t need to switch to the mobile menu so soon.

    Thanks!
    Carolin

    April 24, 2019 at 8:12 pm #1094153
    Victoria

    Hi Carolin,

    Yes, this can be done too but the header height might not change and so the logo will need to be centered too. Just different css.

    Best regards,
    Victoria

    April 25, 2019 at 1:35 am #1094235
    messmeriza

    Hi Victoria,

    I would like to try that! Could you please give me the CSS for it?

    Thanks,
    Carolin

    April 29, 2019 at 1:15 pm #1095258
    Victoria

    Hi Carolin,

    Best regards,
    Victoria

    April 29, 2019 at 4:36 pm #1095329
    messmeriza

    Sorry yes the website is live now. Pointgreyfiesta.org
    See login below
    Thanks
    Carolin

    • This reply was modified 5 years, 7 months ago by messmeriza.
    April 30, 2019 at 8:21 pm #1095890
    Victoria

    Hi Carolin,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (min-width:768px) and (max-width: 990px) {
    .responsive .logo img {
        width: 70%;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .responsive .logo img {
        width: 80%;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 30, 2019 at 9:00 pm #1095928
    messmeriza

    Hi Victoria,
    I have pasted your CSS into Enfold > General Styling > Quick Css but the logo does not scale when you resize the browser window and make it smaller.
    Any other ideas?
    Thanks,
    Carolin

    May 3, 2019 at 9:39 am #1096819
    Victoria

    Hi Victoria,

    The code works only for specified sizes, which sizes are you looking at?

    Can you please post a few screenshots?

    Best regards,
    Victoria

    May 8, 2019 at 7:12 pm #1098549
    messmeriza

    Hi Victoria,

    the logo only starts to scale in size when the browser window is as wide as the logo. Can you try it yourself, just minimize the browser window manually by dragging it smaller with your mouse. I would like to set the logo to scale when you start scaling the browser window. Then I wouldn’t need to switch to the mobile menu so soon.

    Is that possible?

    Thanks,
    Carolin

    May 14, 2019 at 6:51 am #1100367
    Victoria

    Hi Carolin,

    You can try to set the logo width to auto but it might not give the expected result.

    Best regards,
    Victoria

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