![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
October 14, 2022 at 8:25 am #1368812
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/1MIxGZW2) 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 #1368867Hey 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,
RikardOctober 14, 2022 at 2:46 pm #1368872Hi 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 #1368937Hi,
Thanks for the login details. I added some CSS for you at the top of Quick CSS, please review your site.
Best regards,
RikardOctober 17, 2022 at 7:52 am #1369051Excellent 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 -
AuthorPosts
- The topic ‘1) Menu bar overlapping header logo 2) how to vertically center logo, always’ is closed to new replies.