Customising the Menu / Navigation

Hi, I’m using the Basel theme and imported the Jewellery demo, I have the site looking close to how the client wants it however I need to be able to customise the menu.
Could you please advise on how to remove the border lines on the menu, and also the border line that is showing below the product grid “load more” button a bit further down the page? We don’t want the line showing in any area,so custom CSS that removes it entirely would be great.

Thank you kindly,
Michelle

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .navigation-wrap {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

In order to remove the line under “Load more” enter the page and edit the row which contains the product grid, switch to the Design tab and remove the border. http://prntscr.com/o4gbs4

Best Regards

Thank you kindly, that worked great.

Is there any way to spread the menu items apart so theres about 100px between each item, and possible put a vertical line (single side border) between each menu item?

Thank you!

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

body .main-nav .menu > li > a{
  padding:0 50px;
	height:15px;
	line-height:15px;
	border-right: 1px solid #cccccc;
	margin:10px 0;
}
body .main-nav .menu > li:last-child > a{
	border-right: 1px solid transparent;
}

Best Regards

Hi, thanks for that – I have pasted that in the Desktop Custom CSS and it hasn’t worked.
Could you please double check? The URL is witwdemo.com
Thank you

Sorry, I have logged out and back in then retried and it’s worked! Thank you.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts