Hi All,
I have a menu bar on my website, and the “about us” button has some child items avaliable via flyout.
The problem is that even if I set my menu background to be white, when i hover over the “about us” button, the flyout menu is transparent and it looks awful.
Anyone know how I can fix this so that the flyout menu is white and not transparent?
The answer would be in the CSS. If you can post a link to your page we can point you in the right direction to show you what CSS is controlling that area.
Sure thing - https://primarycareworkforce.co.uk/. Appreciate your help!
Right now in your main.min.css file there is a rule to set the background-color to transparent for all “a” tags. To be honest, I don’t know why you need that on all links. I would consider removing it from your CSS and doing a thorough test of your site to see if there is another reason for it. Then for the menu, I would look to add a style for .hs-menu-depth-2 a[role=menuitem] to get the effect you want on the submenu item.
Thank you so much for looking into this for me, and im sorry for the silly questions - but i cannot seem to find main.min.css anywhere in my design manager and none of the menu.css files i’ve looked at contain any reference to any background colour information at all.
I’m sorry to be a pain, but could you explain it like im a 5 year old? which file do i need to edit, and what with?
@JGriffiths9 wrote:
Thank you so much for looking into this for me, and im sorry for the silly questions - but i cannot seem to find main.min.css anywhere in my design manager and none of the menu.css files i’ve looked at contain any reference to any background colour information at all.
I’m sorry to be a pain, but could you explain it like im a 5 year old? which file do i need to edit, and what with?
Unfortunately each instance is unique and depending on how it was setup the file could be anywhere in the design manager. The file may not be minified in the design manager so the filename you are looking for may just be main.css . The code in that file currently says the following which is causing your issue. But even with that you should add styles/padding to that area to make it look right.
a {
background-color: transparent
}
If you needed someone to jump in and look around I have a bit of free time this afternoon if you needed support to figure out where this is if you are having issues.
hey i would really appreciate any help you can give, so please let me know how i can get you to jump in and take a look!
To change the background color of the flyout menu on your website, you’ll likely need to modify the CSS (Cascading Style Sheets) code associated with the menu. Specifically, you’ll want to target the flyout menu element and apply a background color property to it. If you’re using a pre-built menu plugin or template, there may be options within the plugin’s settings or template customization tools to adjust the flyout menu’s appearance. If you’re comfortable editing code, you can inspect the flyout menu element using your browser’s developer tools to identify the appropriate CSS selectors to target. Once you’ve identified the correct selector, you can add a background color rule to set the desired color for the flyout menu. If you’re not familiar with CSS or coding, you may want to reach out to a web developer or consult the support resources for the specific menu plugin or template you’re using for guidance on customizing the flyout menu’s appearance.
