Reduce space between the block site title tagline logo and the main menu bar

• 

  lorenedevbil · Member · Feb 28, 2017 at 6:15 pm

  • Copy link
  • Add topic to favorites

  Hello,

  There is a big gap between the block formed by my logo+Site title+tagline
  and my main menu bar.
  How could I reduce it?

  Thanks a lot

  Loren

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

• 

  staff-loquaciousloon · Staff · Mar 1, 2017 at 5:15 pm

  • Copy link

  Hi there!

  It looks like you used this style in your Custom CSS to move your tagline up next to your logo:

  @media screen and (min-width: 961px) {
  	.site-description {
  		position: relative;
  		top: -90px;
  		left: 90px;
  	}
  }

  The problem here is that position: relative removes an element from where it would normally sit – the space that element usually takes up remains in place. So the theme is still leaving room for the tagline after you’ve shifted it.

  There are other ways to go about that by using position: absolute, but it looks like you’d need an additional media query for that.

  Let’s remove some bottom padding and apply a negative margin instead. Replace the above entry in your CSS with this:

  @media screen and (min-width: 961px) {
  	.site-description {
  		position: relative;
  		top: -90px;
  		left: 90px;
  	}
  
  	.header-main {
  		padding-bottom: 0px;
  		margin-bottom: -35px
  	}
  }

  It does what you were already doing, and then pulls everything else on the page up a little higher.

  I did also want to share a few fun tricks to help streamline your CSS as well – if you have multiple elements that you want to style the same way, you can combine them into a single style, with comas.

  Example:

  /*  BEFORE */
  #menu-item-1564 a {
  	color: #495C6E;
  	font-style: italic;
  }
  
  #menu-item-1565 a {
  	color: #495C6E;
  	font-style: italic;
  }
  
  /*  AFTER */
  #menu-item-1564 a,
  #menu-item-1565 a {
  	color: #495C6E;
  	font-style: italic;
  }

  You can do the same thing with the three display: none styles near the end of your CSS code.

  Another fun tip – I see you’ve written coloring styles for your individual menu items. Very cool that you spotted how to target each one individually, that will come in handy for making some blue and others yellow.

  For example, all of your blue and white menu items can be done like this:

  .main-navigation-menu ul a {
  	color: #fff;
  	font-weight: bold;
  }

  That one style does them all. Similarly, for the yellow and gray menu items:

  #menu-item-1564 ul a,
  #menu-item-1565 ul a {
  	color: #495C6E;
  	background-color: #FFC935;
  }

  Told you your menu id’s would be handy! this basically looks at those last two menu items, and changes the color of links in the list inside them.

  The last tip I’d offer: avoid using !important whenever possible. It’s basically an override, so if you add more CSS later, it might not work and it can get tricky to figure out why.

  You can almost always use a more specific CSS selector (or leave the !important all together) instead.

  Here’s a before and after of your CSS as a whole, in case you want to compare:

  Before: https://cloudup.com/i7DvJwcQoTz
  After: https://cloudup.com/iS3qTLgDp9J

  Let me know if you have any questions :)

• 

  lorenedevbil · Member · Mar 1, 2017 at 5:56 pm

  • Copy link

  Hi,

  Thank you so much so spending some time to improve my CSS code lines and give me all these advices.
  I applied them to reduce useless coding part (the colored items one by one).

  However, I’ve bumped into 2 issues:
  – The font color white doesn’t work for ONLY ONE of my sub items but only when I look into the customization page. When I open the blog in another page, then all items are grey. But they are white on my phone. Weird?
  .main-navigation-menu ul a:link {
  color: #FFFFFF;
  font-weight: bold;
  }
  – I’ve lost the the size reduction I was trying to do with the following code
  #main-navigation ul ul a {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  }

  Could you please help me with these?

  Thanks a lot

• 

  staff-loquaciousloon · Staff · Mar 2, 2017 at 2:28 pm

  • Copy link

  Nice catch! The theme has a :visited style defined, so any menu links you’ve already been to will have the gray color. We can fix that:

  .main-navigation-menu ul a:link,
  .main-navigation-menu ul a:visited {
      color: #FFFFFF;
      font-weight: bold;
  }

  Now that style will target links you’ve visited as well as ones you haven’t. Sorry for missing that the first time through :)

  The menu resizing you’ve mentioned wasn’t there when I looked yesterday, after checking your CSS revisions, it looks like it might have been removed before I came along (perhaps accidentally?)

  You can add it back in, without the !important markers, and it should work just fine:

  #main-navigation ul ul a {
  	padding-top: 0;
  	padding-bottom: 0;
  }

• 

  lorenedevbil · Member · Mar 2, 2017 at 3:47 pm

  • Copy link

  Hello,
  Everything is perfect!!
  Thanks a lot

• 

  staff-loquaciousloon · Staff · Mar 2, 2017 at 6:00 pm

  • Copy link

  Yay! You’re welcome!