Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 4, 2020 at 7:23 pm #1209673
    Arctic Leaf

    I’m working on this site: https://woodbridgechurch.org/ and had to add some custom CSS in order to remove the hamburger menu from showing up on desktop view (because the option within the theme itself wasn’t working) and when I did that it pushed all of the menu items down and also makes them go over top of the logo sometimes.

    I’ve been trying to fix it for quite a while with no avail. Any suggestions?

    May 4, 2020 at 9:14 pm #1209727
    Jordan Shannon

    Hey Arctic,

    Add this to quick css:

    .avia-menu.av-main-nav-wrap{
margin-top:-35px!important;
}

#menu-item-search{
margin-top:35px!important;
}

    Best regards,
    Jordan Shannon

    May 5, 2020 at 2:37 pm #1209974
    Arctic Leaf

    Well, that worked for the main menu but now it made the hamburger menu in the wrong spot (it’s now up way too high). And it still doesn’t solve the problem of the menu being able to go on top of the logo if you start slowly resizing your browser window down.

    This is everything I have in quick CSS (including what you put up above.) 

    @media only screen and (min-width: 768px) {
.av-hamburger {
	display:none!important;
	}
}
	

@media only screen and (max-width: 768px) {
	.menu-item-top-level {
		display: none!important;
	}
}

	.avia-menu.av-main-nav-wrap{
margin-top:-35px!important;
}

#menu-item-search{
margin-top:35px!important;
}
    May 5, 2020 at 2:43 pm #1209977
    Arctic Leaf

    On that note, fixed the hamburger menu. I kept putting code in the wrong spot.

    Seems like the only way to fix the menu going over top of the logo problem is to make the responsive menu pop up really early. Is that the only solution?

    May 5, 2020 at 10:40 pm #1210106
    Jordan Shannon

    Hi,

    You can go mobile sooner. Please try the following in Quick CSS under Enfold->General Styling:

    @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;
  }
}

    Change the value 1024 to the pixel value of your choice.

    Best regards,
    Jordan Shannon

    May 6, 2020 at 2:07 pm #1210347
    Arctic Leaf

    Thank you! Looks like that’s working!

    May 6, 2020 at 9:47 pm #1210486
    Jordan Shannon

    Hi,

    Perfect, I’m happy to help. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Menu Wonky After Removing Hamburger Menu from Desktop’ is closed to new replies.