"Stylish navigation bar overlaying a stunning background image in Bootstrap 4.0

Is there a way to ensure that my navbar stays on top of my background image in bootstrap 4.0 without using negative margin top? I want a solution that is easy to work with even if changes are made to the site.

HTML:

<div class="masthead">
    <nav>
        <img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
    </nav>
</div>
<div class="container-fluid hero"> </div>

CSS:

.hero {
  height: 600px;
  background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
  background-position: center center;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

nav {
  background: transparent;
  background-attachment: fixed;
  background-position: auto,center;
}

.site-logo {
  height: 64px;
}

JSFiddle

htmlcsstwitter-bootstrapbootstrap-4styles

Answer №1

To ensure the logo is always positioned at the top without using negative values, apply display:relative; to the parent div and display:absolute; along with top:0; to the child(nav).

If there is no specific parent element, the positioning will default to the body, allowing the image to be absolutely positioned relative to the body.

Avoid using negative values by utilizing absolute positioning, which will correctly fit-in the image in various scenarios.

Access the fiddle link here for experimentation.

.hero {
  height: 600px;
  background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
  background-position: center center;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

.masthead {
  display: relative;
}

nav {
  background: transparent;
  background-attachment: fixed;
  background-position: auto, center;
  position: absolute;
  top: 0;
}

.site-logo {
  height: 64px;
}
<div class="masthead">
  <nav>
    <img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
  </nav>
</div>
<div class="container-fluid hero"> </div>

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

Choose a specific value from a drop-down menu

Looking for a solution with this piece of code: $('#Queue_QActionID').change(function () { if ($(this).val() == '501' || $(this).val() == '502' || $(this).val() == '503' || $(this).val() == '504' || $( ...

javascriptjqueryhtmldatepickerevent-handling

Show the updated count retrieved from a specific record in a database table using Ajax technology

I am looking to retrieve the latest ID from a database table and then increase it by 1. I want to display this incremented value in either an Input or Label element of HTML, instead of using tables as most tutorials do. Below is a snippet of my code: inde ...

c#htmlajaxasp.net-mvc-5controller

What is the method for automatically scrolling down while hovering over an image?

How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image? I have a couple of questions: How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doe ...

javascripthtmlcsshover

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss

How to vertically center the contents of two adjacent divs with automatic width?

I've experimented with a range of HTML elements and CSS styles in an effort to make this work, but without success. How can I achieve the following task? My goal is to have two side-by-side DIVs that automatically adjust their size based on the conte ...

csshtml

Implementing Click function to selectively display a single object within a JSON array

In my JQUERY code, I've created a .each loop that iterates through data in a JSON file and populates the content into small thumbnails. When you click on a thumbnail, it should display the corresponding content on the post page. The issue I'm fa ...

jqueryhtmljsonajax

Unusual behavior of PHP echo when inserting into an HTML value attribute

Let's dive right into the problem. I have a database entry that is a string in the column name1 and it looks something like this: COMPANYNAME DIVADAY The key characteristic of this string is that it is mostly a combination of two or more words separ ...

phphtmlsql-server

Styling: Ensuring my sidebar does not overlap with my main content on the webpage

Currently, I am working on arranging my sidebar and map so that they are displayed side by side instead of the sidebar appearing on top of the map (as shown in the image). I'm seeking advice on how to achieve this layout using CSS because I have been ...

htmlcssreactjs

I am looking to remove the magnificent popup jQuery effect

Appreciate the assistance so far. This issue is a bit tricky for me, as it involves jquery which I'm not well-versed in. My aim is to make my image clickable. <div class="col-lg-6 col-sm-12 mt-3"> <a class="portfolio-box" href="im ...

jqueryhtmlcssbootstrap-4

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

htmlangulartypescriptdatatablesangular-ui-bootstrap

Troubleshooting: How the Mozilla scrollbar is affecting the positioning of my elements (with jsfiddle

I need assistance with my code on both Chrome and Mozilla browsers. The layout looks perfect in Chrome, but in Mozilla, the scrollbar is affecting the positioning of my list elements. Could someone please help me figure out how to make it consistent acros ...

cssgoogle-chromewebkitmozilla

Is there a way to display the full text of a lengthy select option?

I'm facing a challenge with long <option>s in my <select> box - I don't want the box to be too wide, but when I style it smaller, the full text gets cut off. One idea is to hover a duplicate of the text exactly over the option the mou ...

jqueryhtmlcssforms

Automatically open Bootstrap dropdown upon loading the page

Displayed below is my dropdown menu styled using bootstrap: <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a> <ul class="dropd ...

javascriptjqueryhtmlcsstwitter-bootstrap

Text field imposter - How to move icon to the right when focused

http://jsfiddle.net/g54p4/ If you need to view the HTML and CSS, it's available on jsfiddle. <div class="box-input"> <input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email"> </div> ...

css

Exploring the functionality of Jquery with the :active selector

Here is the code I have been working on: $('#ss a:active').parent().addClass('ss-active'); It seems like my code is not functioning as expected. Can you help me figure out how to achieve my desired outcome? Additionally, I want the bu ...

jqueryhtmlcsscss-selectors

Is it possible to display a unique website based on the browser being used?

I have been working with Bootstrap 4 and discovered that it no longer supports Internet Explorer 8. This could pose an issue, so I am wondering if there is a way to display a different website specifically for Internet Explorer 8, or if there are ways to ...

htmltwitter-bootstrapbootstrap-4twitter-bootstrap-4

Is there a way to switch between different ag-grid themes using SCSS when loading them?

I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...

csssassag-grid

Optimizing CSS selector performance

Although the performance variance is minimal, I am curious to know which CSS selector is faster? div.class{ } or .class{ } ...

css

AngularJS causing issues with Materializecss dropdown menu operation

I'm currently working on a web application using Materializecss and AngularJS for the front-end. However, I've encountered an issue with the dropdown menu component of Materialize not functioning as expected. Here's an example of the dropdo ...

javascripthtmlcssangularjsmaterialize

I prefer children to have their own unique style, instead of inheriting their parent's CSS

I currently have a project structured in the following way: There is an index page with a full layout Separate PHP files that are included in the index page Bootstrap is used in the index page, however, in some of the separate PHP files I also use jqgri ...

phpjquerycsstwitter-bootstrap