-
Posts
-
Hi Enfold Support,
Thank you for the split menu solution in the documentation with a vertically aligned center logo. So far your instructions found in your documentation allowed for the menu to look fine on desktop/larger screens. Although when the screen moves within the break points the menu wraps OR the mobile burger menu hides behind the logo in the center instead of pushing the logo to the left and the menu aligns to the right. Any idea how to fix this?We have some break points in the custom CSS although this brings up another issue about spacing between menu items (see below):
/* SHOW MOBILE HAMBURGER MENU */
@media only screen and (max-width: 1200px){
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
display: block;
}
}How can we allow the spacing between the menu items to shrink until the menu items start to overlap and or wrap to another line and then jump to the mobile menu?
Page URLs and login credentials are located in the private content area.
Thank you so much for your help.
EricHey Eric,
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: 780px) and (max-width: 1200px) { #header .main_menu { width: 30%; left: 0; transform: none; } }If this does not do what you need, please attach mockups of what you need.
If you need further assistance please let us know.
Best regards,
VictoriaThanks Victoria, unfortunately that reverted the menu back to it’s original state with the logo aligned left. Here’s the custom css code we’re using supplied within the Enfold documentation. This aligns the logo vertically and horizontally perfectly as well as keeps the menu items balanced on screens wider than 1200px:
/* CUSTOM CENTERED GLOBAL NAVIGATION */
@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:360px;
}
#header .main_menu {
/*background: gold;*/
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: 300px;
}
}It’s when you view the site on smaller screens or shrink the browser window does the mobile menu break. So essentially i’m seeking help to fix the mobile menu when using the Enfold solution for a split menu with centered logo.
Thanks!Hi,
The solution provided in the documentation is for the default theme settings and it should revert to the default mobile header with logo left and burger menu on the right provided if there is no other custom code conflicting with it.
I have updated the media query to kick in at 1200px at the same width at which your burger menu kicks in.
Please clear the cache and review the site :)
Best regards,
VinayThanks Vinay! That appears to have fixed it. So both the media query and what we set the break point for the mobile menu needs to be the same else we’ll see the problems with the menu? Is there also a way to have the menu fonts and horizontal spacing between menu items, shrink to retain the centered logo menu nav until both the spacing and font size reach too small a point and then jump to the mobile menu? Hoping I can go smaller than 1200px with the current menu items (character lengths) without having the nav menu wrap or jump to the mobile menu. Thanks!
Hi,
Thank you for writing back. 1200px would be a sweet spot for the media query to kick in. As you can see in the below screenshot there is approx another 100px left because the right side of the menu has fewer items. If you close that gap there will be not much room for the menu on some device depending on user settings. If a user has set a large font to be able to read easily the menu may appear broken.
If you still want to close that gap you can try by reducing the media query to 1100px in both the places where we try to customize the menu.
Best regards,
VinayHi Vinay,
This all worked out and we massaged the spacing to work. The only problem is that the last responsive break point has the burger menu without any padding on the right size–same issue with the padding on the left size of the logo. What’s the custom CSS to add more padding to the burger menu and the logo after the last break point i.e. when in mobile portrait view?Thanks!
EricPS
New login credentials in private area.Hi,
I have added the below code to your site. Please clear the cache and review your site :)
@media only screen and (max-width: 767px) { .responsive .av-burger-menu-main { padding-right: 20px; }}Best regards,
VinayThanks Vinay. You guys are the best!
Quick question… the centered logo navigation seems to be a pretty popular header treatment. Is there any thoughts of adding this to the header options for future updates to the Enfold theme?
Thanks again!
Eric
- You must be logged in to reply to this topic.