-
AuthorPosts
-
July 27, 2023 at 11:16 am #1414647
Hello,
I’m creating a test site at the URL posted in the private content area.
I have used the split menu css you posted on a previous post (posted below).
I have also used some other css you posted somewhere to enable the menu to switch to burger menu at a lesser breakpoint (posted below also).
However when the breakpoint occurs at the first point it puts the burger icon right in the centre of the logo, before the 2nd breakpoint puts it correctly at the right hand side.
I also tried using the Main Menu > General > Menu Items For Mobile options but these push the burger menu to the very left of the screen and when clicked it doesn’t work.
My question is can you help me fix it so the breakpoints work correctly so that the current menu items always show without overlapping the logo and when screen size is reduced enough the burger menu always goes to the right hand side correctly?
/*------------------------*/ /* CSS - Logo center split menu /*------------------------*/ @media only screen and (min-width: 780px) { /*In the below code nth-child(x) the value of x should be half the number of total menu items*/ #top #header .av-main-nav li:nth-child(4) { /* Adjust the width of the logo */ margin-right: 30vw; } .av_seperator_small_border .av-main-nav > li:nth-child(5) > a > .avia-menu-text { /* Remove Border */ border-left: none !important; } #header .main_menu { width: 100%; left: 50%; transform: translateX(-50%); } .av-main-nav-wrap { left: 50%; transform: translateX(-50%); } #header .logo { left: 50%; transform: translateX(-50%); z-index:999; } #header .logo img { top: 50%; transform: translateY(-50%); max-width: 250px; } }
/* BURGER MENU SMALL DESKTOPS & TABLETS */ @media only screen and (max-width: 1366px) { nav.main_menu { display: block !important; } #avia-menu .menu-item { display: none; } .av-burger-menu-main.menu-item-avia-special { display: block; } }
July 27, 2023 at 12:23 pm #1414662Hey jamesbarrell,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (min-width: 780px) and (max-width: 1366px) { #header #header_main .main_menu { width: unset; left: unset; transform: unset; } }
After applying the css, please clear your browser cache and check.
Best regards,
MikeJuly 27, 2023 at 12:25 pm #1414663Hi guys,
Found another issue with the fix.
At the first breakpoint it doesn’t actually slide in the mobile menu. It just opens nothing and displays the X.
Any ideas?
Thanks,
James.- This reply was modified 1 year, 3 months ago by jamesbarrell.
July 27, 2023 at 3:18 pm #1414682Hi jamesbarrell,
I’m glad that Mike could help you :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Split Menu and Burger Layout issue’ is closed to new replies.