Home>Support>Sidebar settings – increase font size & decrease padding

Sidebar settings – increase font size & decrease padding

Hi I’m trying to increase the font size to 16 and decrease the padding of the sidebar so that more words can fit in the line. I’ve put in a custom menu with links going down to the right hand side of the site
I’ve experimented quite a bit with the css code & managed to change the colour of the links at least.

/* Sidebar Custom Menu Widget */

#secondary .widget_nav_menu ul li {
background: #ffffff;
  font-size: 16
    line-height: 16px;
}
#secondary .widget_nav_menu ul li a {
  color: #666666;
  font-size: 16
    line-height: 16px;
  padding: 10px 20px 10px;
  text-decoration: underline;
}
#secondary .widget_nav_menu ul li:hover > a {
background: #fffff;
  font-size: 16
    line-height: 16px;
color: #f47e3c;
text-decoration: underline;
}

Also it’s strange, Ive made this site a premium child theme site but within theme settings it doesn’t show up ‘Premium’ although I think I’ve got all the premium settings.

URL: http://www.shellychiro.co.za/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 months ago Eli Langley

    I would also like to increase the line height so there is a bit more of a gap between the links. That’s why I put in line-height: 16px into my code, but it didn’t make a difference.

  2. 8 years, 10 months ago Eli Langley

    It woud be really nice to have dots next to each link too

  3. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi :)

    Please, try removing all Custom CSS you’ve created for the sidebar menu widget. Remove all styles pasted in your initial question. Replace with mine:

    /* Sidebar Custom Menu Widget */
    
    #secondary .widget_nav_menu ul {
    	list-style: disc;
    	margin-left: 18px;
    }
    
    #secondary .widget_nav_menu ul li {
    	font-size: 16px;
    	line-height: 2;
    }
    #secondary .widget_nav_menu ul li a {
    	color: #666666;
      	padding: 10px 20px 10px 0;
      	text-decoration: underline;
    }
    #secondary .widget_nav_menu ul li:hover > a {
    	background: #fffff;
    	color: #f47e3c;
    }
    

    Hope that helps.

  4. 8 years, 9 months ago Eli Langley

    Thank you, looks perfect!

  5. 8 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Glad that helped :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More