Appearance of header menu

• 

  grassoart · Member · Oct 1, 2016 at 9:44 pm

  • Copy link
  • Add topic to favorites

  Hi, I would like to have a rectangle of a certain color around the selected page instead of a line under it in the menu on the desktop mode. Is that possible?

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

• 

  innisfreehomestead · Member · Oct 1, 2016 at 10:07 pm

  • Copy link

  Hey there!

  .main-navigation .primary-menu .current_page_item > a, .main-navigation .primary-menu .current-menu-item > a, .main-navigation .primary-menu .current_page_ancestor > a {
  	background-color: #3359a5;
  	border-color: transparent;
  	padding: 5px;
  }

  Let me know if that doesn’t work!
  Sage

• 

  grassoart · Member · Oct 2, 2016 at 8:15 am

  • Copy link

  Is it possible to make the rectangle cover all the height of the header and be a little bit larger?

• 

  grassoart · Member · Oct 2, 2016 at 8:43 am

  • Copy link

  And also doing this changes only to the desktop version

• 

  innisfreehomestead · Member · Oct 3, 2016 at 7:58 pm

  • Copy link

  Hey there,

  Sorry for my late response!

  This should do the trick:

  @media screen and (min-width: 896px) {
  	.primary-menu .menu-item {
  		margin: 0px;
  	}
  	.main-navigation .primary-menu .current_page_item > a, .main-navigation .primary-menu .current-menu-item > a, .main-navigation .primary-menu .current_page_ancestor > a, .main-navigation .primary-menu a:hover {
  		background-color: #3e69dc;
  		border-color: transparent;
  		color: #FFF;
  	}
  	.primary-menu a {
  		padding: 34px 10px;
  	}
  	.main-navigation {
  		margin-top: 0px;
  	}
  	.site-header {
  		padding-bottom: 0;
  	}
  }

  Let me know if that doesn’t work,
  Sage

• 

  grassoart · Member · Oct 3, 2016 at 8:14 pm

  • Copy link

  It does, thanks! The only problem is that scrolling down, if you have the fixed header, it changes the height, Is it possible to make it be always the same? And one last thing: the title is not in the center of the height anymore, how can I align it back?

• 

  innisfreehomestead · Member · Oct 3, 2016 at 8:20 pm

  • Copy link

  That’s great!

  Replacing the code I gave you with this should fix those points:

  @media screen and (min-width: 896px) {
  	.primary-menu .menu-item {
  		margin: 0px;
  	}
  	.main-navigation .primary-menu .current_page_item > a, .main-navigation .primary-menu .current-menu-item > a, .main-navigation .primary-menu .current_page_ancestor > a, .main-navigation .primary-menu a:hover {
  		background-color: #3e69dc;
  		border-color: transparent;
  		color: #FFF;
  	}
  	.primary-menu a {
  		padding: 34px 10px;
  	}
  	.main-navigation {
  		margin-top: 0px;
  	}
  	.site-header {
  		padding-bottom: 0;
  	}
  	.scrolling .site-header {
  		padding-bottom: 0px;
  	}
  	.scrolling .main-navigation, .scrolling .site-branding {
  		margin-top: 0;
  	}
  	.site-branding {
  		margin-top: 0px;
  	}
  }

  Hope that helps,
  Sage

• 

  grassoart · Member · Oct 3, 2016 at 8:23 pm

  • Copy link

  Absolutely PERFECT! Thank you so much!

• 

  innisfreehomestead · Member · Oct 3, 2016 at 8:23 pm

  • Copy link

  Huzzah!