Skip to main content
R
r_tist
Inspiring
October 16, 2023
Question

sticky nav background-img on scroll issue

  • October 16, 2023
  • 4 replies
  • 270 views

Hi,

 

I applied a background image to my sticky navbar. However, it only appears upon scrolling  the page.
Initially, the background is transparent. - I cannot find how to target this to ensure my background image also reveals prior to end-user scrolling...

 

In property inspector, I see element.style {background-image: none;} and when I turn off that style, the background-img successfully displays.

 

Question is, there is no element.style in the CSS or HTML. - It's like a phantom style. ...How do I pinpoint this to remove from the code?

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll" style="background-image: none;">

 

Thank you.

    This topic has been closed for replies.

    4 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    October 17, 2023

    Unfortunately, you are only showing the code that you think is relevant. Actually, there is much more to show.

     

    `data-navbar-on-scroll` allows a certain feature to show once the page is scrolled. In this case it is a background image, one that is initially hidden.

     

    Be careful when using `navbar-light` in Bootstrap 5.3.+, it has been depricated. See for more:

    https://youtu.be/zsPaZOqe2eA?si=8BvgffMUTQlcF23v

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 16, 2023

      Your navbar is light color scheme without a bg-color.  I don't know why you're using data-scroll.  It has nothing to do with backgrounds.

       

      What you have now:

      <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block">

       

      To add a contextual bg-color (primary, secondary,  success, danger, warning, info, dark, light, white):

      <nav class="navbar navbar-expand-lg navbar-light bg-info fixed-top py-3 d-block">

       

      To add linear bg-gradient:

      <nav class="navbar navbar-expand-lg navbar-light bg-info bg-gradient fixed-top py-3 d-block"

       

      Bootstrap Background Utilities Explained:

      https://getbootstrap.com/docs/5.1/utilities/background/

       

      Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      October 16, 2023
      quote

       

      <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll" style="background-image: none;">

       

      Thank you.


      By @r_tist

       

      Isn't the answer in the code block you supplied - style="background-image: none;"

       

       

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        October 16, 2023

        I can't picture a background-image on a navbar.  A background-color maybe, but not an image.

         

        What's the URL? 

        Upload your page and supporting files to a server you control so we can see what you mean.

         

         

         

        Nancy O'Shea— Product User & Community Expert
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices