Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 22, 2019 at 11:06 pm #1150323
    B

    Hello, I am having trouble editing the styling for the full width sub menu, I’m wanting to remove the grey back ground, change the font colour to #333333 and increase the thickness of the red line so that its the same thickness as the red line under my main menu. Also is there any way to hide the full width sub menu on mobile?

    October 22, 2019 at 11:20 pm #1150328
    Jordan Shannon

    Hey B,

    Add this to quick css:’

    #top .av-submenu-container .container .av-subnav-menu li{
background:transparent!important;
border-top:none!important;
border-left:none!important;
border-right:none!important;
border-bottom:3px solid #F32219;
}

@media only screen and (max-width: 767px)  {
#sub_menu1{
display:none!important;
}}

    Best regards,
    Jordan Shannon

    October 22, 2019 at 11:39 pm #1150334
    B

    Hi Jordan, the font colour hasn’t changed and there’s a thin line behind the thick line now, is there any way to remove that?

    October 23, 2019 at 11:34 pm #1150696
    Jordan Shannon

    Hi,

    Adjust the css to this:

    #top .av-submenu-container .container .av-subnav-menu li{
background:transparent!important;
border-top:none!important;
border-left:none!important;
border-right:none!important;
border-bottom:3px solid #F32219;
color:#F32219;!important
}

    Chnage the color to whatever you need.

    Best regards,
    Jordan Shannon

    October 24, 2019 at 1:38 am #1150704
    B
    This reply has been marked as private.
    October 24, 2019 at 5:34 am #1150740
    Jordan Shannon

    Hi,

    Apologies. Fixed below:

    #top .av-submenu-container .container .av-subnav-menu li{
background:transparent!important;
border-top:none!important;
border-left:none!important;
border-right:none!important;
border-bottom:3px solid #F32219;
color:#F32219!important;
}

    Best regards,
    Jordan Shannon

    October 24, 2019 at 9:12 pm #1150986
    B
    This reply has been marked as private.
    October 24, 2019 at 10:50 pm #1150997
    Jordan Shannon

    Hi,

    Remove all css I gave you and use this instead:

    	#top .av-submenu-container .container .av-subnav-menu li{
background:transparent!important;
border-top:none!important;
border-left:none!important;
border-right:none!important;
border-bottom:0px!important;
}

		#top .av-submenu-container .container .av-subnav-menu li a{
color:#F32219!important;
}

    Best regards,
    Jordan Shannon

    October 24, 2019 at 10:55 pm #1151002
    B
    This reply has been marked as private.
    October 24, 2019 at 11:04 pm #1151009
    Jordan Shannon

    Hi,

    Yes, adjust css to this:

    #top .av-submenu-container .container .av-subnav-menu li a{
color:#333333!important;
}

#top .av-submenu-container .container .av-subnav-menu li a:hover{
color:#F32219!important;
}

    To remove the border:

    #top .av-submenu-container .container .av-subnav-menu::before,
#top .av-submenu-container .container .av-subnav-menu::after{
border-bottom:0px!important;
}

    Best regards,
    Jordan Shannon

    October 24, 2019 at 11:26 pm #1151027
    B

    Thanks Jordan! That has done the trick, is there a way that I can hide the sub menu on mobile and tablet?

    October 24, 2019 at 11:29 pm #1151029
    Jordan Shannon

    Hi,

    Perfect to hide the sub-menu on the mobile and tablet add the following:

    @media only screen and (max-width: 1024px)  {
#top .av-submenu-container .container .av-subnav-menu{
display:none!important;
}}

    Best regards,
    Jordan Shannon

    October 24, 2019 at 11:31 pm #1151031
    B

    Awesome, thanks so much for all your help! :)

    October 24, 2019 at 11:33 pm #1151032
    Jordan Shannon

    Hi,

    No problem I’m happy to help! If you need anything else, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Full width sub menu styling’ is closed to new replies.