ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• August 30, 2015 at 3:49 pm #208714
  hlrinke

  Member

  Post count: 7

  Hi there,

  Is it possible to set the main menu on the home page to be mobile style for all devices, and have the default menu styling (I’m using header 6) for all other pages?

  Thanks,
  Heather

  September 1, 2015 at 4:54 pm #209315
  David Martin – Support

  Moderator

  Post count: 20834

  Hi Heather,

  This is a fairly large modification, but here is a broad example of how to do it, add this to your custom CSS within the theme options:

  	/* HEADER */
  
  	.home #logo a.mobile-menu-show {
  	    float: right;
  	    padding: 9px 4px 11px 10px;
  	    font-size: 22px;
  		display: block!important;
  	}
  	.mobile-menu-open #mobile-menu-wrap {
  	    visibility: visible;
  	    display: block;
  	}
  	.home .header-overlay .header-wrap {
  		margin-left: -375px;
  		max-width: 750px;
  	}
  	.home #header .is-sticky .sticky-header {
  		left: 0;
  	}
  	.home nav.mega-menu li .sub-container {
  		width: 720px!important;
  	}
  	.home nav.mega-menu li .mega .sub, nav.mega-menu li .mega .sub > .row {
  		width: 720px!important;
  	}
  	.home .header-1 #logo, .header-2 #logo {
  		width: 100%;
  	}
  	.home .header-3 #logo, .header-4 #logo, .header-5 #logo {
  		width: 100%;
  		padding-right: 30px;
  		position: relative;
  	}
  	.home .header-6 #logo, .home .header-7 #logo {
  		width: 100%;
  		padding: 0 15px;
  		left: 0;
  		height: auto;
  		position: relative;
  	}
  	.home .naked-header .header-wrap {
  		top: 0;
  		position: relative;
  	}
  	.home .naked-header.header-overlay .header-wrap {
  		left: 0;
  	}
  	.home .naked-header #header-section #logo img {
  		display: none;
  	}
  	.home .naked-header #header-section #logo img.standard {
  		display: inline-block;
  	}
  	.home #logo img {
  		height: auto!important;
  		min-height: auto!important;
  	}
  	.home #header .header-container {
  		height: auto;
  		overflow: hidden;
  		padding-bottom: 10px;
  	}
  	.home nav.search-nav {
  		display: none;
  	}
  	.home #logo a {
  		float: left;
  	}
  	.home #main-navigation {
  		display: none;
  	}
  	.home .header-1 #main-nav, .home .header-1 #main-nav-sticky-wrapper, .home .header-1 .header-left, .home .header-1 .header-right, .home .header-2 .header-right, .home .header-2 #main-nav, .home .header-2 #main-nav-sticky-wrapper {
  		display: none;
  	}
  	.home #logo {
  		width: 100%!important;
  	}
  	.home .naked-header .sticky-wrapper:not(.is-sticky) #logo img {
  		display: none!important;
  	}
  	.home .naked-header .sticky-wrapper:not(.is-sticky) #logo img.standard {
  		display: inline-block!important;
  	}

  Cheers,
  David.

  September 3, 2015 at 10:44 am #210062
  hlrinke

  Member

  Post count: 7

  This is AWESOME – thank you. I also need to remove the white header background and logo on the home page. I’ve removed the logo using this code:

  .home #logo img {
  display: none;
  }

  Having trouble removing the header background though. Any suggestions?

  Thanks again.

  September 3, 2015 at 11:03 am #210073
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Great thanks to David Martin for this customization hard work. I really appreciate it. Please use this custom css css for header background :-

  #header-section{
  background:transparent !important;
  }

  Thanks
  Mohammad

  September 4, 2015 at 5:51 pm #210517
  David Martin – Support

  Moderator

  Post count: 20834

  No problem, thanks Mohammad!

  – David.

  September 27, 2015 at 6:19 pm #216677
  hlrinke

  Member

  Post count: 7

  Thank you both very much you’ve been a HUGE help.
  Mohammad, for some reason that code did not hide the header background on the home page. Not sure what I’m missing.

  Thanks

  September 28, 2015 at 4:14 am #216696
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please provide me specific page url with issue.
  Thanks
  Mohammad

  September 29, 2015 at 12:00 am #217061
  hlrinke

  Member

  Post count: 7

  This reply has been marked as private.
  September 29, 2015 at 6:06 am #217075
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  I dont see any header background beside gray color at top.
  Thanks
  Mohammad

  September 29, 2015 at 9:34 am #217125
  hlrinke

  Member

  Post count: 7

  Hi Mohammad,

  It’s the gray colour I’m trying to eliminate (I thought that was the header). I’m looking to have nothing across the top on the home page. Just the mobile-style menu “floating” over the slider in the top right corner.

  I think I can get it to work with:

  .home #header-section {
  background:transparent!important;
  height:0px;
  }

  ..that is, unless there is a better way. It doesn’t seem to affect the sticky header, though. That still appears when scrolling that page.

  Thanks,
  Heather

  September 29, 2015 at 9:42 am #217129
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  #header-section::before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
      background: transparent !important;
  }

  Thanks
  Mohammad

  October 1, 2015 at 12:20 am #217696
  hlrinke

  Member

  Post count: 7

  Hi Mohammad,

  That did the trick. I just had to isolate it to the home page but it looks like that worked perfectly.

  Thanks so much for your help.

  Cheers!

  October 1, 2015 at 8:16 am #217723
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  You most welcome. Glad to help you.
  Thanks
  Mohammad

• Back to forum

  Posted in: Dante