20-12 lanason.co.uk – Menu Customisation

• 

  lanason · Member · Aug 14, 2015 at 8:18 am

  • Copy link
  • Add topic to favorites

  How can i change the size of the “buttons” on my top menu and give the bar a shading or highlight on each “button”

  can i reduce the spacing between the words ???

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

• 

  thesacredpath · Member · Aug 14, 2015 at 7:38 pm

  • Copy link

  Hi, do you want them smaller or larger, and what did you have in mind for shading or highlighting them?

• 

  lanason · Member · Aug 14, 2015 at 10:34 pm

  • Copy link

  reducing the spacing between the menu words is the key thing

  what options are available to making the bar look less plain

• 

  thesacredpath · Member · Aug 15, 2015 at 12:56 am

  • Copy link

  We’ve got a number of options for making it look less plain. Let’s give this a go as a first option. Replace the existing media query you have at the top of your custom CSS with this one. It adds a linear gradient (vertical) to the menu background, changes some padding and spacing on the menu items and adds a borderline to the right of the menu items.

  @media screen and (min-width: 600px) {
  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
      background: linear-gradient(#33cccc, #339999);
      background: -moz-linear-gradient(#33cccc, #339999);
      background: -o-linear-gradient(#33cccc, #339999);
      background: -webkit-linear-gradient(#33cccc, #339999);
      margin-top: 75px;
  }
  	.main-navigation li {
  		margin-right: 0;
  		border-right: 2px solid
  	}
  	.main-navigation li a {
  		margin-left: 0 !important;
  		padding-right: 16px;
  		padding-left: 16px;
  	}
  	.main-navigation li a:hover {
  		color: #fff;
  	}
  	.main-navigation ul li:first-child {
  		margin-left: 22px
  	}
  }

• 

  lanason · Member · Aug 15, 2015 at 12:14 pm

  • Copy link

  that looks much better – thanks

  what do the 4 gradients do – only the last one appears to change anything?

• 

  thesacredpath · Member · Aug 17, 2015 at 7:52 pm

  • Copy link

  Great, glad that did the trick for you. Some browsers/browser versions have special needs when it comes to gradients and don’t understand the full CSS3 gradient code, so we have to add additional declarations so that the gradient will work in the widest number of browsers and browser versions.

• 

  lanason · Member · Aug 18, 2015 at 3:53 pm

  • Copy link

  Ah thanks that makes sence

• 

  thesacredpath · Member · Aug 18, 2015 at 10:08 pm

  • Copy link

  You are welcome.