side bar, division lines

• 

  annascherman · Member · Aug 27, 2015 at 9:49 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have division bars between each item in my menu which I would like to eliminate. I tried entering this code:

  .site-navigation li, .secondary-navigation {border: none;}

  I also tried this:

  p {border-style: none;}

  The theme I am using is Blask.

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

• 

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

  • Copy link

  Hi there, site-navigation is a CSS id, so it would need to begin with a # sign. CSS classes start with a period ( . ). I would use the following, which uses the main-navigation class, which is the class where the border is declared in the original CSS.

  .main-navigation li {
      border-top: none;
  }

  I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

• 

  annascherman · Member · Aug 28, 2015 at 8:21 pm

  • Copy link

  Ah, ok. That is very helpful.

  When I use the web inspector, I was able to find information about the main-navigation class, but I couldn’t find where it mentioned information about the border? I am only asking, so I can start to derive how to do this myself.

  So now, if I want to modify the spacing between each menu item (currently, it looks double spaced, I would like there to be no gap between each line of text on the navigation bar), is that written into the CSS currently?

• 

  annascherman · Member · Aug 28, 2015 at 8:46 pm

  • Copy link

  I came up with this after a little googling:

  .main-navigation li{padding-top: 0em; padding-bottom: 0em;}

  which allows me to add padding on either side, but not take it away…

• 

  thesacredpath · Member · Aug 29, 2015 at 12:13 am

  • Copy link

  On the menu items, there are two things creating the spacing in between them, and the are both on the .main-navigation a rule. That rule sets a line height of 1.5 and then there is also top and bottom padding. I would suggest adjusting the padding with the following CSS. The first number, 0.75em adjusts the top and bottom spacing. The 0 is the left/right spacing.

  .main-navigation a {
      padding: 0.75em 0;
  }

• 

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

  • Copy link

  On CSS and the web inspector, sometimes you have to go further into the stuff. The menu are unordered lists, so there will be the ul and inside that the li and then inside each li is the “a” text link of the menu item.