Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 18, 2015 at 4:43 pm #445813
    nickamis

    Hi,

    I would like to make my Full Width Sub Menu transparent both it appears below the site logo and when the user scrolls down. The Sub Menu is always within a colour section with an image as a background. I want the image to appear behind the menu.

    Link to the site is below.

    Regards, Nick

    May 20, 2015 at 3:24 am #446877
    Ismael

    Hi Nick!

    Thank you for using Enfold.

    Can you please provide a screenshot of what you’re trying to do? If you want to remove the background of the full width sub menu element, add this in the Quick CSS field:

    .main_color.av-submenu-container, .main_color .av-subnav-menu a {
  background: transparent;
}

    Best regards,
    Ismael

    May 20, 2015 at 8:34 am #446979
    nickamis

    Hi Ishmael,

    Unfortunately that didn’t work. Here’s a picture showing what I want to achieve and the layout of the page design.

    https://dl.dropboxusercontent.com/u/21527968/menu.jpg

    Regards, Nick

    May 20, 2015 at 4:20 pm #447235
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    #sub_menu1 {
  background: transparent!important;
}
.home #av_section_2 {
  margin-top: -55px;
}

    Regards,
    Yigit

    May 21, 2015 at 10:39 am #447664
    nickamis

    That’s great. Works perfectly. One quick last question if you don’t mind. The menu appears great on mobile but not on tablet. How do I force the menu to display the mobile version on tablets e.g. below 990px?

    May 23, 2015 at 1:15 am #448780
    Josue

    Hi!

    You can set that in Header > Mobile Menu.

    Best regards,
    Josue

    May 23, 2015 at 7:54 am #448983
    nickamis

    Hi Josue,

    Yes, I’ve already changed the setting. It looks as is the Full Width Submenu Element doesn’t support Tablet device widths. I’ve add the following in an attempt to fix the problem but at this width clicking the single Menu button does nothing.

    @media only screen and (max-width: 990px) {
    #top .main_color .mobile_menu_toggle { display: inline-block; }
    div.container.av-menu-mobile-active { text-align: center; }
    ul#menu-main-menu.av-subnav-menu.av-submenu-pos-center { display: none; }}

    .entry-content-wrapper div li, ul.av-catalogue-list {
    border: none !important;
    }

    Regards, Nick

    May 23, 2015 at 8:02 am #448990
    Josue

    Hey Nick!

    Your final code should be like this:

    @media only screen and (max-width: 990px) {
	#top .main_color .mobile_menu_toggle { display: inline-block; }
	div.container.av-menu-mobile-active { text-align: center; }
	ul#menu-main-menu.av-subnav-menu.av-submenu-pos-center { display: none; }
	.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu{display:block;}
	.responsive #top .av-menu-mobile-active {text-align: center; }
	.responsive #top .av-menu-mobile-active .mobile_menu_toggle{display: inline-block;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu{display:none;}
	.responsive #top .sticky_placeholder{height:0px;}
	.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }
	.responsive #top #wrap_all .av-menu-mobile-active.container {width:100%; max-width: 100%;}
	.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu{display:block;}
	.responsive #top .av-subnav-menu > li:first-child{margin-top:-1px;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu  li{display:block; padding:0;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a{border-left:none; padding:15px 15%; text-align: left;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: "\25B6"; position: absolute; top: 15px; margin-left: -10px; font-family: 'entypo-fontello'; font-size: 7px;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul{visibility:visible; opacity: 1; top:0; left:0; position: relative; width:100%; border:none;}
	.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul{display: none;}
	.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul.av-visible-sublist{display: block;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul a{padding:15px 19%;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li li > ul a{padding:15px 24%;}
	.responsive #top .av-menu-mobile-active .av-subnav-menu li li li > ul a{padding:15px 29%;}
}

    Cheers!
    Josue

    May 23, 2015 at 8:44 am #449005
    nickamis

    Hi Josue,

    Looking good. We’re getting there. Just one problem remains. The submenu for ‘Bedrooms’ still appears when hovering. I’ve tried display none on the submenu but this doesn’t work.

    Regards, Nick

    May 23, 2015 at 10:55 am #449026
    Josue

    Hi!

    Paste the code again but copy it from the forum reply, not from the e-mail notification.

    Cheers!
    Josue

    May 23, 2015 at 11:21 am #449034
    nickamis

    Perfect! Thanks. Have a great day.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘How to make Full Width Sub Menu transparent’ is closed to new replies.