Jump to content

Top Menu Custom Edit


Recommended Posts

Try adding the following to themes/default-bootstrap/css/blocktopmenu/css/superfish-modified.css:

.sf-menu > li { display: table; width: 120px; text-align: center; margin-bottom: 0 }
.sf-menu > li li { text-align: left; }
.sf-menu > li > a { display: table-cell; vertical-align: middle; height: 55px; font-size: 14px; line-height: 20px; padding: 6px 12px }
.sf-menu, .sf-menu > li, .sf-menu > li > a { border: none; }
.sf-menu > li:nth-child(8) > a, .sf-menu > li:nth-child(9) > a, .sf-menu > li:nth-child(10) > a, .sf-menu > li:nth-child(11) > a { background: #054e92; color: #fff; }

This code displays the menu items as a table so that the content can be vertically aligned, gives each item a fixed width so it can have two lines, centres the text horizontally and vertically, removes all borders and changes the eighth, ninth, tenth and eleventh items to have a blue background with white text.

 

Hopefully, this will give you a good starting point to achieve what you want.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...