Additional CSS – Sticky Menu colour not changing.

  • nerd22

    (@nerd22)


    4 years, 2 months ago

    Theme: Astra Starter Templates.
    Page Builder: Elementor Free.
    Cache: Cleared & Turned off for now.
    CSS ID:#ast-desktop-header

    I’ve followed this article – https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/ . Initially when adding the CSS, the sticky effect would *not* work at all. Changing the “z-index” to “999” allowed it to start working showing, but the colour will not change.

    Additional Troubleshooting:
    https://mediatemple.net/blog/web-development-tech/why-your-custom-css-doesnt-work-in-wordpress-and-how-to-fix-it/

    According to the above article if “!important” is needed, it indicated that a stylesheet further down is overriding the CSS I’m editing.

    The article calls for 2 plugins to be installed, one of them hasn’t been updated in 5y, so I won’t be installing the older plugin anytime soon…

    How else can I troubleshoot & fix this issue?

    Semi-Working code:
    #ast-desktop-header {
    background:black;
    height:0px;
    z-index:999;
    margin:0 auto;
    border-bottom:0px solid #dadada;
    width:100%;
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    text-align: center;
    }

    Thank you!

    Regards,

    Nerd22

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator threadi

    (@threadi)

    4 years, 2 months ago

    The element with the ID #ast-desktop-header has a zero height as mentioned in your code. Remove “height:0px;” from it and you will see the black background.

    Thread Starter nerd22

    (@nerd22)

    4 years, 2 months ago

    Thank you Threadi! I’m a network engineer & new to the CSS side of things 😛

    In the mean time, I came right with the following base from Codepen, that I adjusted a little, but their implementation worked. (https://codepen.io/terrorpixel1991/pen/qBBNaeE)

    My edit –
    ”

    #ast-desktop-header {
  z-index: 10;
  transition: all 1.4s;
    padding: 1px 0;
    width: 100%;
    background: black;
    position: fixed !important;
  }
    Moderator threadi

    (@threadi)

    4 years, 2 months ago

    I do not currently see this source code in the web page. Therefore the header is still not black. Where did you insert the code?

    Thread Starter nerd22

    (@nerd22)

    4 years, 2 months ago

    Hi Threadi,

    I added it to the Customise-Additional CSS. I’ve changed the ‘black’to clear & am now trying to wrap my head around the transitional-scroll, which I hope to use to make the header shrink slightly & then change to black. Sorry for any confusion.

    I’m modifying this – https://codepen.io/viablethought/embed/MwLoYv?default-tab=css%2Cresult&theme-id=0 – with a smaller pre-shrink height & different colours.

    Thank you again for your willingness to help! I’m hoping to add value to this forum from a WP performance and security point of view.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Additional CSS – Sticky Menu colour not changing.’ is closed to new replies.