Responsive menu in custom header and other issues

I have a few issues I need to clean up on my website and I’ve searched the forums and found some posts but they didn’t quite solve my problems. www.hau5.ca

  1. I am using a custom header with integrity theme and I want to add the portfolio filter option. I’m assuming this would require child theme updates to add a hook, would you know what the hook is for the integrity portfolio filter?

  2. I want to add a mobile menu to my custom header for smaller screen resolutions and I added a navigation dropdown that is only visible during those screen queries but when I click it, it doesn’t show the dropdown. (this header is on blog and portfolio pages)

  3. Whenever I make a CSS change in my child theme, the site doesn’t “update” right away, I’ve been doing a clean load in incognito and old css rules are still existing so I don’t believe its a cache issue?

Hi @hau5tastic,

Thank you for writing in, 1) regretfully the portfolio filters are not supported when using a custom header. If you need filtering, you can use the bundled Essential Grid or the Grid plugin to power your portfolio page.

We added [x_portfolio_filters] as a shortcode. People can add it to a content area element and it will output the filters on a portfolio page. It will still use stack styling and may require some custom CSS to get it looking just right depending on how people end up placing it in the bar. This is more of a stopgap solution until we make a new blog/portfolio system later on.

  1. Please turn off the Bar’s Content Scrolling option, the Bar where your mobile menu is placed.



  1. Maybe your CSS selector is not strong enough, please make your selector more specific.

Hope it helps,
Cheers!

Thank you for the response.

Regarding 1 & 2, those solved my issues :slight_smile:

for the third one, the rules are not the problem, I’m first trying them out in dev console and then when I put them in the customizer’s css it’s fine but if I put it in the child theme css file it will update but not right away, doesn’t matter if I use incognito mode or not or even force refresh.

Hello @hau5tastic,

When you add your custom css in the child theme’s style.css file, it will not take effect because it were being overridden with the other css and settings. I would like you to take into account the order of the styles in the theme. The order is this:

  • Theme’s stack style.css
  • Child theme’s style.css
  • WordPress Additonal CSS (Appearance > Customize > Additional CSS)
  • Theme Option Settings
  • Theme Option’s Global CSS
  • Cornerstone/Pro editor’s Custom CSS

The only way you can make sure or force the css code in the child theme is by using the css class specificity. For example, instead of using this:

.x-masthead {
  // some styling
}

You can use this code in your child theme’s style.css

.x-child-theme-active .x-masthead {
  // some styling
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.