change style of submenu

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I have created a custom navigation menu by tweaking the CSS but if I add a drop down menu it seems to come in a default style that i cannot modify, and it does not go with the menu I created. Is there any way of changing the style of this?

Thanks
Mike
Photo of Mike Housman

Mike Housman

  • 2 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Mike,

I'm trying to understand what you are describing and wanted to take a look but I don't see any secondary menu on the website associated with the email address you used on this forum. Can you share a link to the website you are working on please?

You are correct that our flyover menus can't be customized, but if you've made your own, my first instinct in not to use the ones built into the style but I want to see your site to know if that advice makes sense.
Photo of Mike Housman

Mike Housman

  • 2 Posts
  • 0 Reply Likes
Hi Laura,

The site is here - http://sbtest.besthost.co.uk/ - and the drop down menu is under the Test menu item. Ideally I would like to change the colour and style, make the submenu items smaller.

Thanks
Mike
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Mike

If you wish to make some changes to your font properties on your Flyover Menu, you will need to do some HTML coding to achieve this. Please add the following code to your Site CSS (Site > Site Settings > Site CSS):
.ys_submenu ul li a {

color:#000000 !important;
font-family: Comic Sans MS !important;
font-size: 12px !important;
}

.ys_submenu ul li a:hover, .ys_submenu ul li:hover a {
color: #000000 !important;
font-family: Comic Sans MS !important;
font-size: 12px !important;
}

You can edit the properties after these tags:
  • color: changes the font colour. Please see our Colour Code Chart for webfriendly colours.

  • font-family: Enter the name of the desired font. Please note there is only a small selection of webfriendly fonts. You can find them in the drop down menu of the Text Editing Toolbar that opens when you edit a Text Widget.

  • font-size: Edit the amount of pixels to get the desired font size.

If you have any trouble with this, please let us know and we can have our HTML specialists assist further.

You may also need to add the above code to each page of your website. To do so:
  1. Drag and drop an HTML Code Widget at the top of the page.

  2. Add the above code and include it into these tags:
    <style type="text/css">
    
    ... *** the above code goes here *** ...
    </style>
Please note that we may change the menu CSS at any time in the future as we develop and improve this feature and when we do so we cannot guarantee that your customizations will be unaffected.