Sketch theme footer and menu code

• 

  soniagadra · Member · Apr 2, 2015 at 3:01 pm

  • Copy link
  • Add topic to favorites

  I need css code for 2 changes to the Sketch Theme:

  1. Menu Hiding: The Sketch menu is designed to appear as a row of links on larger screens (where the browser window is at least 1281 pixels wide), and be hidden behind a “MENU” button on smaller screens. I’m happy with that action, but I’d like to change the min width for a full menu to something like 1200. The background on the page disappears at some number not too far below 1281. I’d be happy if the menu hid at that width too, whatever it is.

  2. Footer Text (specifically for a copyright notice): I’d like to place a longish copyright notice in the footer. Because it’s longish, i’d like to center it.

  I know similar questions have been asked before. I’ve spent almost an hour searching for answers, but I just can’t figure it out based on the other topics I’ve found, so I’d really appreciate your help with these. Thanks.

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

• 

  thesacredpath · Member · Apr 2, 2015 at 11:56 pm

  • Copy link

  Hi there,

  1. Menu Hiding: The Sketch menu is designed to appear as a row of links on larger screens (where the browser window is at least 1281 pixels wide), and be hidden behind a “MENU” button on smaller screens. I’m happy with that action, but I’d like to change the min width for a full menu to something like 1200. The background on the page disappears at some number not too far below 1281. I’d be happy if the menu hid at that width too, whatever it is.

  Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  @media screen and (min-width:1200px){
  	.menu-toggle{
  		display:none
  	}
  
  	.site-logo{
  		max-height:100px
  	}
  
  	.has-site-logo .main-navigation{
  		height:100px
  	}
  
  	.has-site-logo .main-navigation>div,.has-site-logo .main-navigation>ul{
  		position:relative;
  		top:50%;
  		-moz-transform:translateY(-50%);
  		-webkit-transform:translateY(-50%);
  		transform:translateY(-50%)
  	}
  
  	.main-navigation{
  		font-size:.8125em;
  		line-height:2.09231em;
  		clear:none;
  		float:right;
  		max-width:50%;
  		text-align:right
  	}
  
  	.main-navigation ul:first-child{
  		display:block
  	}
  
  	.main-navigation ul li{
  		display:inline-block
  	}
  
  	.main-navigation ul li:hover>ul,.main-navigation ul li.focus>ul{
  		display:block;
  		opacity:1;
  		visibility:visible;
  		-webkit-transition:all .3s ease-in-out;
  		-moz-transition:all .3s ease-in-out;
  		-o-transition:all .3s ease-in-out;
  		transition:all .3s ease-in-out
  	}
  
  	.main-navigation ul a{
  		border-bottom:0;
  		padding:5px 0 5px 14px
  	}
  
  	.main-navigation ul ul{
  		background:white;
  		border:1px solid #eee;
  		display:none;
  		-webkit-transition:all .3s ease-in-out;
  		-moz-transition:all .3s ease-in-out;
  		-o-transition:all .3s ease-in-out;
  		transition:all .3s ease-in-out;
  		float:left;
  		opacity:0;
  		padding:0 7px;
  		position:absolute;
  		top:27px;
  		left:0;
  		text-align:left;
  		visibility:hidden;
  		z-index:99999
  	}
  
  	.main-navigation ul ul li{
  		border-bottom:1px solid #eee;
  		padding:5px 5px 4px
  	}
  
  	.main-navigation ul ul li:last-of-type{
  		border-bottom:0
  	}
  
  	.main-navigation ul ul li a{
  		line-height:1.5;
  		padding:5px;
  		width:180px
  	}
  
  	.main-navigation ul ul ul{
  		left:100%;
  		top:0
  	}
  
  	.main-navigation ul ul li a,.main-navigation ul ul ul li a,.main-navigation ul ul ul ul li a{
  		padding-left:5px
  	}
  }

  2. Footer Text (specifically for a copyright notice): I’d like to place a longish copyright notice in the footer. Because it’s longish, i’d like to center it.

  Depending on how long, it might be a problem. Give the following a try. Centering is difficult since the social media icons end up getting pushed down below the copyright, so I’ve kept things left aligned.

• 

  soniagadra · Member · Apr 3, 2015 at 12:32 am

  • Copy link

  Thanks @thesacredpath. Is it me or did your code for the second item not get posted? Again, thanks for your help.

• 

  soniagadra · Member · Apr 3, 2015 at 12:37 pm

  • Copy link

  BTW – the menu code seems to work well. I had no idea it would be so complicated. Thank you so much.

• 

  thesacredpath · Member · Apr 3, 2015 at 7:59 pm

  • Copy link

  Sorry about that. I was sure I had pasted that in, but let’s try again.

  .site-info::before {
      content: "This is my very very very long copyright statement telling you all about what you can and can't do with my content.";
      display: block;
      color: #000;
      font-weight: bold;
      padding-bottom: 10px;
      font-size: 110%;
  }
  .site-info {
      max-width: 80%;
  }
  .site-info a {
      text-transform: none;
  }

  The first rule above is the copyright and its styling. You can use what you wish and delete any declarations you do not use.