I prefer not to have my navigation bar obscuring the top of my background image

Utilizing both bootstrap classes and Python Flask has been quite interesting for me. My current setup includes a navbar with the following classes:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

Additionally, here is the code for my fixed background image:

<div class="home-wrap">
    <div class="home-inner" style="background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),  url('static/img/Produkte/all.JPG');">
    
    </div>
</div>

In an attempt to resolve any issues, I experimented with the following CSS:

.home-inner {
position: relative;
top: 60px;
}

Although effective initially, I noticed that resizing the screen caused a gap to appear. How might I adjust this so that the navbar does not overlap the top of my background image and remains responsive?

htmlcssbootstrap-4

Answer №1

It's difficult to pinpoint the issue without seeing any code.

You could consider removing the fixed-top class from the navbar (shown below)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

The fixed-top class is a Bootstrap default that changes the container's position to position:fixed;top:0 (view bootstrap documentation here)

UPDATE: To have the navbar follow the scroll path but not overlap your image on initial load, you can substitute the fixed-top class with the sticky-top class on the navbar (see documentation here).

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">

This solution may vary depending on your Bootstrap version. As far as I remember, sticky-top was introduced in Bootstrap versions above 4.x (The documentation I referenced pertains to Bootstrap >= 5.x, so ensure it aligns with the version utilized by your website)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of using colspan in CSS?

I'm attempting to rearrange a table layout from its current form: https://i.sstatic.net/fVgz6.png to look like this: https://i.sstatic.net/cYXGD.png using only CSS. The rationale behind this is the abundance of space available on desktop compared ...

htmlcsscss-tables

Disrupting Alignment Due to Input Tag

Hey there, I'm having an issue with my header design. I have a horizontal list of links in my header, and next to them, I wanted to add a search bar. Unfortunately, when I added the search bar next to the links, they all ended up appearing behind my b ...

htmlcss

Having issues with custom CSS functioning properly on WordPress sites

I have a customized section on my WordPress page with specific CSS and HTML. You can view the code here: Upon hovering over the image, the code is designed to display a semi-transparent background. However, when I implement this code onto my WordPress si ...

htmlcsswordpresshover

Retrieving Dropdown Values based on Selection in Another Dropdown

On my website, there are two dropdown lists available: 1) One containing Book Names 2) The other containing Links to the Books. All data is stored in an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <BookDetail> <boo ...

javascripthtmlajaxxmlxslt

Retrieving text snippet from an HTML document using .NET

Users input HTML content using a richtext editor, allowing for a variety of elements. Here is an example of such content: <h1>Header 1</h1> <p>Some text here</p><p>Some more text here</p> <div align=right><a hr ...

asp.nethtmlregexstringhtml-content-extraction

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

javascripthtmlarraysangulardatatable

Inject JSON data into HTML form inputs

I'm facing a challenge with handling JSON data and integrating it into a form. The JSON structure I have consists of information about accessories with various attributes such as sku, discounts, upsell options, quantities, and dates. My task is to dyn ...

javascriptjqueryhtmljsonforms

Tips for compressing css styles with webpack version 3

My goal is to optimize and minify my CSS for production, but I'm encountering errors with my current implementation. Here's a snippet of my webpack 3 configuration in config.production.js: var webpack = require("webpack"); var path = require("pa ...

javascriptcssnode.jswebpackfrontend

Error encountered when attempting to save a video using PHP due to an undefined index

Seeking assistance with my php code dilemma. I am attempting to insert data into mysql using a form that includes a video upload option which stores the video locally and the video URL in the database. However, when testing the form, I encounter multiple e ...

phpmysqlhtml

Continuously updating C# HTML parsing

I am facing a challenge with my webpage that is using AJAX queries to display data, as I need to parse this data in a C# program. The issue arises when I try to view the source code of my webpage, which does not show the data due to it being automatically ...

c#htmlajaxweb-scraping

Struggles with ajax and JavaScript arise when attempting to tally up grades

Currently, I am facing an issue with my JavaScript. The problem arises when trying to calculate marks for each correctly chosen answer based on information from the database. If an incorrect answer is selected, the marks are set to '0', otherwise ...

javascriptjqueryhtmlajax

Extract content from whole webpage including HTML, CSS, and JavaScript

Currently I am working on developing a webpage version control backup/log system. The goal is to automatically save a static copy of the webpage, including all its CSS and JavaScript files, whenever there are any changes made. I have already figured out h ...

javascriptcssgoweb-scraping

Styling two divs with borders

Hello everyone, I could really use some assistance with merging the borders of two <div>s. Here's what I'm trying to achieve compared to where I currently stand: view image here and this is my desired outcome view image here Would anyone b ...

htmlcss

A guide to implementing lazy loading using BXSlider

I have implemented an image gallery using Bxslider, but I am facing an issue with the loading time as there are more than 15 images in each slide. To address this problem, I want to load images one by one when a particular slide appears. I came across an e ...

jqueryhtmlcssbxsliderlazy-loading

Troubleshooting: Issues with AngularJS Data Binding in HTML Tables

I have been working on code from an online tutorial but unfortunately, it is not functioning properly. I have checked the script, app, and controller but still cannot identify the issue. Any assistance would be greatly appreciated! ...

htmlangularjs

Managing the display of numerous ngFor components

If you're interested in learning more about the features I will include, here's a brief overview. I plan to have a project section with cards displayed for each project, all populated from a JSON file. When users click on a card on the website, a ...

javascripthtmlangulartypescriptangular6

template not being loaded with form

My Django form is not showing up when I try to implement it. Even after checking the browser's inspector, there is no sign of it being loaded at all. If more information is required, please let me know. Here is the project structure: /beerad url ...

pythonhtmldjango

Hover to reveal stunning visuals

Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...

htmlcsshovermousehover

Tips for resolving a top bar on the left side Grid with CSS without it covering the adjacent right side Grid element

I am currently working with material-ui and react, and facing an issue with the positioning of a top bar within a Grid element. The top bar is meant to be fixed in its position, but not at the very top of the page as it is inside a parent Grid element. I ...

htmlcssreactjsmaterial-ui

Utilizing JavaScript: Passing a parameter into a function to be used with getElementById()

Implementing a feature that displays statistics by incrementing rapidly until reaching their final value when the element is in view, creating the illusion of a rising number. Encountering some difficulty in passing the necessary parameters to identify th ...

javascriptjqueryhtmlcssparameters