Jump to content

Change line height in top menu


Recommended Posts

If you are using the default theme, you can change this by going to themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

to change padding on the main menu items, at line 65 I changed padding to 10px 35px.

 

To change the padding for categories such as yours, Bathrooms, Kitchens, to give it more vertical space edit at line 80.

 

However, yours looks very different from the defaul theme, which has good spacing for categories and subcategories, as well as chevrons. It could be that you need to edit the CSS for your theme. Note, that chages to the default theme will be overwritten on updates. I keep my files backedup to restore when necessary as I have changed much of the CSS.

 

Daniel

Link to comment
Share on other sites

If you are using the default theme, you can change this by going to themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

to change padding on the main menu items, at line 65 I changed padding to 10px 35px.

 

To change the padding for categories such as yours, Bathrooms, Kitchens, to give it more vertical space edit at line 80.

 

However, yours looks very different from the defaul theme, which has good spacing for categories and subcategories, as well as chevrons. It could be that you need to edit the CSS for your theme. Note, that chages to the default theme will be overwritten on updates. I keep my files backedup to restore when necessary as I have changed much of the CSS.

 

Daniel

Hi Daniel, thanks for the answer I tried to change the line height at line 80 but this only changed the spacing between subcategories but not the main categories. On menu pages with subcategories the spacing is fine it's only a problem when there are no subcategories as in my image above.

Thanks

Chris

Link to comment
Share on other sites

Okay I've managed to fix this by editing the code of the bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

and edited  from line 148 to:

sf-menu > li > ul > li {

  float: left;
  width: 20%;
  padding-right: 15px; 
  padding-bottom: 10px;} (line added)
this seems to have done the trick :)
  • Like 3
Link to comment
Share on other sites

Try line 139. I don't have categories now so not sure, looks like change there.

The attributes for the those categories font start at line 141. I was able to change size and color

Thanks for the reply managed to sort it now by adding padding-bottom: 10px;} @ line 152 :)

Link to comment
Share on other sites

Hi guys on a similar theme my top menu has two lines of categories.

When you hover over one of the top line cats it opens layered nav underneath...fine.

However if you hover over a cat from the bottom line the layered nav opens up but covers up the second row of categories. How can I get this to open lower?

Any ideas?

Regards

Lee

Link to comment
Share on other sites

×
×
  • Create New...