Help with custom CSS with my Zuki theme?

• 

  beachsidevr · Member · Apr 3, 2015 at 11:43 pm

  • Copy link
  • Add topic to favorites

  I love the Zuki theme, but there are a couple things I would like to change with custom CSS.

  1. How can I eliminate so much white space in the header? The margins between the featured header and my logo are too big.

  2. How can I make the navigation menu visible and in a line at ALL times (even on smaller devices) instead of stacked and hidden in the corner.

  3. How can I add Google+ to the social widgets and eliminate “Menu Item” from the sidebar social menu (because it links to nothing.)

  Thank you so much for any help you can provide on these issues!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 5, 2015 at 7:11 pm

  • Copy link

  Hi there,

  1. How can I eliminate so much white space in the header? The margins between the featured header and my logo are too big.

  Add the following CSS and you can adjust the top and bottom padding on the navigation. 56px is the top and 80px is the bottom.

  #site-nav {
      padding: 56px 0 80px;
  }

  2. How can I make the navigation menu visible and in a line at ALL times (even on smaller devices) instead of stacked and hidden in the corner.

  The menu changes to the touch device menu at 1259px and below since the normal menu doesn’t work well with touch devices when submenus are present on a site, and also to take up less room. In many instances, people will have quite a number of menu items, and on smaller devices they stack up into multiple rows and make navigation on smaller devices difficult.

  Paste the following CSS into your Custom CSS at the very bottom and see what you think. It keeps the normal menu down to 1024px in screen/window width and then the touch menu activates. 1024px is the iPad landscape orientation width.

  @media screen and (min-width: 1024px) {
  	#header-top-nav{
  		display:block;
  		clear:none;
  		overflow:hidden;
  		text-align:right;
  		padding:21px 0 0 20px;
  		width:60%;
  		float:right
  	}
  
  	#mobile-menu-toggle,#mobile-menu-close{
  		display:none !important
  	}
  
  	#mobile-menu-wrap{
  		display:block !important;
  		margin-bottom:0
  	}
  	#mobile-menu-wrap{
  		overflow:visible
  	}
  
  	#site-nav{
  		padding:56px 0 80px
  	}
  
  	#site-nav ul{
  		position:relative;
  		margin:0;
  		padding:0
  	}
  
  	#site-nav ul li{
  		position:relative;
  		display:inline-block;
  		height:60px;
  		margin:0 20px;
  		padding:0;
  		border-bottom:0
  	}
  
  	#site-nav ul li a{
  		display:block;
  		padding:10px 0 0;
  		font-size:26px;
  		font-size:1.625rem;
  		line-height:1.4;
  		border-bottom:1px solid transparent;
  		-webkit-transition:all ease-in-out .2s;
  		-moz-transition:all ease-in-out .2s;
  		-o-transition:all ease-in-out .2s;
  		transition:all ease-in-out .2s
  	}
  
  	#site-nav ul li a:hover{
  		border-bottom:1px solid #191919
  	}
  
  	#site-nav ul li li a:hover{
  		border-bottom:0
  	}
  
  	#site-nav ul li li{
  		padding:0;
  		margin:0
  	}
  
  	#site-nav ul ul.sub-menu,#site-nav ul ul.children{
  		display:none;
  		position:absolute;
  		top:60px;
  		left:0;
  		width:180px;
  		margin:0;
  		padding:0;
  		border-top:0;
  		z-index:10000000;
  		background:#fff;
  		border-left:1px solid transparent;
  		text-align:left;
  		-webkit-transition:all ease-in-out .2s;
  		-moz-transition:all ease-in-out .2s;
  		-o-transition:all ease-in-out .2s;
  		transition:all ease-in-out .2s
  	}
  
  	#site-nav ul.sub-menu li,#site-nav ul.children li{
  		display:block;
  		padding:0;
  		height:auto
  	}
  
  	#site-nav ul.sub-menu a,#site-nav ul.children a{
  		border-left:0 !important;
  		height:auto;
  		display:block;
  		padding:10px;
  		border-bottom:0
  	}
  
  	#site-nav ul.sub-menu a:hover,#site-nav ul.children a:hover{
  		color:#191919;
  		-webkit-transition:all ease-in-out .2s;
  		-moz-transition:all ease-in-out .2s;
  		-o-transition:all ease-in-out .2s;
  		transition:all ease-in-out .2s
  	}
  
  	#site-nav ul ul ul.sub-menu,#site-nav ul ul ul.children{
  		position:absolute;
  		top:0;
  		left:179px
  	}
  
  	#site-nav ul li:hover>ul{
  		display:block;
  		border-left:1px solid #191919;
  		padding:0;
  		-webkit-transition:all ease-in-out .2s;
  		-moz-transition:all ease-in-out .2s;
  		-o-transition:all ease-in-out .2s;
  		transition:all ease-in-out .2s
  	}
  
  	#site-nav li:hover>a{
  		border-bottom:1px solid #191919;
  		-webkit-transition:all ease-in-out .2s;
  		-moz-transition:all ease-in-out .2s;
  		-o-transition:all ease-in-out .2s;
  		transition:all ease-in-out .2s
  	}
  
  	#site-nav li li:hover>a{
  		border-bottom:0;
  		background:#f4f4f4
  	}
  
  	#site-nav ul ul ul li a{
  		margin-left:0
  	}
  }