Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 14, 2022 at 8:25 am #1368812
    mistermagoo8691

    Hi guys!
    Two questions:
    1) is there any way I can “change the screen size” at which the Main Menu switches to “Mobile Menu”?
    I have a large menu: due to this (I think), when my website is shown on a reduced screen size (or you simply resize the browser), the header log OVERLAPS the menu.

    See the screenshot below: I’ve higlighted the logo in the first “full screen” view.
    https://imgur.com/1MIxGZW

    2) As you can also see from the screeshot above, when you reduce the screen size and reach the “Mobile menu” size, at first the logo is keeping the same padding-top of the “Normal menu” (not good, as the menu bar is now larger). When you reduce the sceen size even more, it switches to a different value (still bad).
    I would like to always have my logo vertically centered, no matter the screen size I am using.
    Am I asking too much? :)

    Thanks folks as usual.
    Bye!
    A.-

    October 14, 2022 at 2:16 pm #1368867
    Rikard

    Hey Angelo,

    Please try this in Quick CSS:

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

    If you should need further help, then please post a link to your actual site.

    Best regards,
    Rikard

    October 14, 2022 at 2:46 pm #1368872
    mistermagoo8691

    Hi Rikard. It is not working. Apparently nothing is changing.
    In “Private” you can find the info on how to access my site.

    Please note that I have, on the top of my custom CSS, this adjustment to the logo image: 

    			/* change width and top padding  */
			 .logo img {
				 padding-top: 8px;
				 width: 170px !important;
			}

    It is reducing the width of the original image (which is 320 pixel wide), and it is ajustiing the padding-top in order to vertically center it when in “full screen mode”.

    Thanks for your help!

    October 15, 2022 at 11:02 am #1368937
    Rikard

    Hi,

    Thanks for the login details. I added some CSS for you at the top of Quick CSS, please review your site.

    Best regards,
    Rikard

    October 17, 2022 at 7:52 am #1369051
    mistermagoo8691

    Excellent as usual, Rikard! thanks so much. You can definitely close the ticket!
    For everyone in the future wondering what he added to my CSS, here it is. I am not sure it is ok for everyone, but at least it is something you can experiment.
    Bye!
    A.-

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

@media only screen and (min-width: 768px) and (max-width: 990px) {
  span.logo img {
        padding-top: 25px;
}
}
    October 17, 2022 at 9:06 am #1369059
    Ismael

    Hi,

    Great! Glad to know that the modifications are now in order. Thanks to @Rikard. Please do not hesitate to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘1) Menu bar overlapping header logo 2) how to vertically center logo, always’ is closed to new replies.