Main Navigation Colors Override Pre-Header Navigation

  • Resolved Howdy_McGee

    (@howdy_mcgee)


    4 years, 6 months ago

    Every now and then I run into an issue where the main navigation colors override the pre-header navigation colors. This usually happens after editing the Additional CSS panel but I don’t think that’s the core of the issue.

    The CSS is all internal, in the header. The Main navigation CSS is more specific:

    .wpbf-navigation .wpbf-menu a,
.wpbf-mobile-menu a,
.wpbf-close { color: #000000; }

    Then later down the same CSS line is:

    .wpbf-pre-header a { color: #ffffff; }

    Here’s a visual representation via Chrome Inspector. This issue doesn’t seem to happen immediately. Not sure if it’s the order in which the options are saved or if it’s updating the Additional CSS panel that triggers something but I’ve run into this a couple time prior. The going solution is manually override the CSS via The Customizer Additional CSS panel.

    —

    Immediately after reporting this I realize that it’s because we’re using the pre-header as a “Utility Navigation” and adding a WP Nav Menu Widget. It’s taking the main navigation colors because it’s a wpbf-menu. Adding something like this to the generated CSS may solve this issue:

    .wpbf-pre-header a,
.wpbf-pre-header .wpbf-menu a { color: #ffffff; }
    • This topic was modified 4 years, 6 months ago by Howdy_McGee.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author David Vongries

    (@davidvongries)

    Hi @howdy_mcgee,

    I wasn’t able to replicate this on my end.

    Are there any other settings turned on in the customizer that you think could cause this issue?

    the Pre Header isn’t a part of the .wpbf-navigation, that’s why both styles shouldn’t interfere with each other.

    What version of the theme do you have installed and do you also running the Premium Add-On?

    Thanks! ??

    Best,
    David

    Thread Starter Howdy_McGee

    (@howdy_mcgee)

    Hello @davidvongries,

    Sorry, this must have got lost in my replies but I’m running into a similar issue again. We’ve been using the pre-header as a utility navigation. You mention that

    The Pre Header isn’t a part of the .wpbf-navigation, that’s why both styles shouldn’t interfere with each other.

    Directly after the <header> tag is a wrapper with some animation attributes, this has the .wpbf-navigation class assigned to it. See the linked image for clarification: https://i.imgur.com/hhcxnBa.jpg

    Sometimes, colors are inherited from the Main Navigation and also link font sizes. The main style looks like this:

    .wpbf-navigation .wpbf-menu a, .wpbf-mobile-menu a {
    font-size: 18px;
}

    The utility style doesn’t reference a anchor tag and thus gets overwritten by the above. It’s style looks like this:

    .wpbf-pre-header, 
.wpbf-pre-header .wpbf-menu, 
.wpbf-pre-header .wpbf-menu .sub-menu a {
    font-size: 15px;
}

    So, because the main navigation font size style is more specific, it takes precedence. Maybe the latter code should also be specific:

    .wpbf-pre-header .wpbf-menu a

    I’m running the latest version of both the theme and the plugin:

    Theme: 2.4.3
    Plugin: 2.4.4

    Theme Author David Vongries

    (@davidvongries)

    Hi @howdy_mcgee,

    I’ve just double-checked it and by default, the pre-header is outside the wpbf-navigation container.

    I wonder why this is happening.

    I must be missing something :/

    Thread Starter Howdy_McGee

    (@howdy_mcgee)

    @davidvongries I think this happens whenever the pre-header is sticky. Looking back at both the cases we ran into this issue both navigation and pre-header were set to sticky.

    Customize > Header > Sticky Navigation > Enable sticky

    Customize > Header > Pre Header > Enable sticky

    Theme Author David Vongries

    (@davidvongries)

    Hi @howdy_mcgee,

    I’m closing this ticket as it’s related to the Premium Add-On.

    I’ve added this to the roadmap and we’re going to look into this.

    Best,
    David

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Main Navigation Colors Override Pre-Header Navigation’ is closed to new replies.