Footer Menu styling not working

[mrmrfrost]

Hi all,

I've got two menus in my website footer. One for the main website pages and then another just for cookie policy, privacy policy etc.

Both have the exact same styling set. The menu with the main website pages shows the correct styling. The menu with the policies keeps reverting back to a black font colour when it has been set to white. 

I've spoken to HubSpot via chat and because I'm on the free platform at the moment they said to post here for some help.

Below is a screen shot of the two menus side by side. As I said, the syling for both is exactly the same. The only difference is the social media icons with a horizontal spacer below the menu that isn't showing the correct styling, but I can't see why that would be causing an issue. 

Thanks in advance!

[mrmrfrost]

Hi Ben,

Thanks so much for identifying the issue. I've been trying to figure out how to add in the CSS to the module - looks like I need to clone the menu module in Design Editor and then add the CSS. I think figuring out what actual CSS code needs to be added is beyond me even though I've found what I think is the right place to add it within the Design Editor. 

I also can't seem to find out where I would add CSS for the global footer as this does sound like a more elegant solution. 

Really appreciate your help, think I might need to find someone to pay to fix it for me. 

[Ben_M]

Only way to troubleshoot this is to see your code. While they may look like there are both menus they could have different ids and/or classes that control the styles which is causing one to look different than the other and only by examining the code can we help determine what is changing the color.

[mrmrfrost]

Hi Ben,

Thanks for the reply, much appreciated. 

Both Menus use the same module, code for that module is here:

{% set menu_id = module.id || module.menu %}
{% menu
id="{{ menu_id }}",
root_type="{{ module.root_type }}",
flyouts="{{ module.flyouts }}",
max_levels="{{ module.max_levels }}",
flow="{{ module.flow }}"
%}

I haven't been able to figure out how to see the code of the menus with the stylings applied, if you can advise where I find that I will happily share both Menu codes in case somthing is different between the two.

Thanks again!

[Ben_M]

Menus can still inherit traits from parent elements so even while it may be the same module visually, it could be inheriting elements from other modules/elements on the page. If you utilize the inspector from your browser (right click --> inspect) it will tell you all the CSS styles that are inherited by your menus so you can compare and determine which is causing your issue. Without access to the code of your page, there is nothing we can do from our end as we would only be blind guessing.

[mrmrfrost]

Thanks, Ben. I believe I've managed to find the right bits of source code. 

Here is the menu that is responding correctly to the styling:

<div class="row-fluid-wrapper row-depth-1 row-number-5 dnd-row">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12">
<div id="hs_cos_wrapper_widget_1725902575096" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<span id="hs_cos_wrapper_widget_1725902575096_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="menu"><div id="hs_menu_wrapper_widget_1725902575096_" class="hs-menu-wrapper active-branch no-flyouts hs-menu-flow-vertical" role="navigation" data-sitemap-name="default" data-menu-id="175298834998" aria-label="Navigation Menu">
<ul role="menu">
<li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="https://expocast.co.uk/about" aria-haspopup="true" aria-expanded="false" role="menuitem">About</a>
<ul role="menu" class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://expocast.co.uk/partners" role="menuitem">Partners</a></li>
</ul></li>
<li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="https://expocast.co.uk/clients" aria-haspopup="true" aria-expanded="false" role="menuitem">Clients</a>
<ul role="menu" class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://expocast.co.uk/talent-attraction-assessment" role="menuitem">Talent Attraction Assessment</a></li>
<li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://expocast.co.uk/our-fees" role="menuitem">Our Fees</a></li>
</ul></li>
<li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="https://expocast.co.uk/jobs" aria-haspopup="true" aria-expanded="false" role="menuitem">Jobs</a>
<ul role="menu" class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://expocast.co.uk/free-course-get-a-job-in-the-events-industry" role="menuitem">FREE Course for Job Seekers</a></li>
</ul></li>
</ul>
</div></span></div>

And here is the menu that is NOT responding to the styling:

<div class="row-fluid-wrapper row-depth-1 row-number-6 dnd-row">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12">
<div id="hs_cos_wrapper_widget_1725902777166" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<span id="hs_cos_wrapper_widget_1725902777166_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="menu"><div id="hs_menu_wrapper_widget_1725902777166_" class="hs-menu-wrapper active-branch no-flyouts hs-menu-flow-vertical" role="navigation" data-sitemap-name="default" data-menu-id="177966775316" aria-label="Navigation Menu">
<ul role="menu">
<li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://expocast.co.uk/terms" role="menuitem">Terms</a></li>
<li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://expocast.co.uk/cookie-policy" role="menuitem">Cookie Policy</a></li>
<li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://expocast.co.uk/privacy-policy" role="menuitem">Privacy policy</a></li>
<li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://expocast.co.uk/modern-slavery-statement" role="menuitem">Modern Slavery Policy</a></li>
<li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://expocast.co.uk/contact" role="menuitem">Contact</a></li>
</ul>
</div></span></div>

Thanks again!

[Ben_M]

That's the HTML, not the CSS. As I stated, CSS inherits from the parent containers all the way back up to the body tag. The quickest and easiest way is to see a live published link of the page to inspect in a browser. If you are not able to provide (ie: restrictions, compliance, etc.) then you will need to hire a resource to help evaluate this for you. I would estimate something like this would take no more than 1-2 hours.

[mrmrfrost]

Hi Ben, ah apologies for sharing the wrong code, really appreciate your patience. 

Here's a live, published page with the footer in question:

https://expocast.co.uk/

Hopefully I've understood correctly and that's what you were asking for. 

Thanks again!

[Ben_M · Accepted solution]

That helps greatly. The menu with the white links has additional CSS on the page which in turn is making those links white, while the second menu is inheriting the default black color of the menu links on your page. The CSS looks to be on-page (line 2027-2028) so I would suspect this CSS is inline or modified in the module itself as opposed to CSS included via the template/theme. I would look for any place that you can potentially add CSS to the module because of where I am seeing this modification. Alternatively you could add global CSS for the .footer .hs-menu-wrapper a to white instead of black so you don't have to manually override each individual menu.