• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

sticky nav background-img on scroll issue

Enthusiast ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

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.

TOPICS
Bootstrap , Code , How to

Views

106

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

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;"

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

LATEST

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines