Themeable Menu Dropdown Colour Issue

[ChalkyW64]

I have been creating a responsive website using the template "atthecoast" as a start point, and encountered a text-colour display problem when modifying the themeable menu contained within it.

I changed the colours for all the various states (default, hover, etc.) to match my theme and everything looked fine when the menu (and dropdown) was accessed from the top of the page. However, scrolling the page (or clicking anywhere to cause the header background to be displayed [initially transparent]) resulted in the drop-down menu items being displayed in the wrong text colour. After much head-scratching, I discovered that the HTML object ('affix header') supplied with the template also contains code which specifies colours for ".dropdown-menu" - but this was not being updated by the program when I modified them via the menu's Properties dialog.

I edited the HTML object and changed:

Code: Select all

#wb_header.affix .headerMenu .dropdown-menu > li > a
{
   color: #4f4f4f !important;
}

to:

Code: Select all

#wb_header.affix .headerMenu .dropdown-menu > li > a:hover
{
   color: #032243;
}
#wb_header.affix .headerMenu .dropdown-menu > li > a:focus
{
   color: #FFFFFF !not sure I need to do this?;
}

which solved the problem.

Is this a bug - or is editing the HTML object something which needs to be done by the user if changing the colours via the Properties dialog?

On a sort of related subject - the only way I could find to change the background colour of the header was by modifying:

Code: Select all

#wb_header.affix
{
   background: #2C5C93;
   transition: all 500ms linear;   
}

Is there a way to do this without editing the HTML object?

[Pablo]

This is not a bug. The affix HTML code is not suppose to be updated automatically.
The purpose of this template is to demonstrate is how to customize the affix style via custom code.
Changes need to be done by the user.

See also:
https://getbootstrap.com/docs/3.4/javascript/#affix