CODEWITHSUNDEEP
csstwitter-bootstrapangularbootstrap-4
Christopher
Christopher

Reputation: 1772

Keep bootstrap 4 navbar at the top and transparent

The only way I am able to keep my navbar transparent so far is by setting it to fixed-top like such:

<nav class="navbar fixed-top navbar-inverse">
    <!-- more html -->
</nav>

As you can see here.

I wish for my navbar to be stuck at the top of my page and to be transparent at the same time. Removing fixed-top removed the transparency and pushes my landing page picture (and component as a whole) under the navbar (when it should overlap the picture).

How can that be achieved?

Upvotes: 1

Views: 4309

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362450

The navbar is transparent by default

The recommended method to accomodate the fixed-top navbar is to use padding-top:56px on the body.

Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.

https://getbootstrap.com/docs/4.0/components/navbar/#placement

If you only want to apply the transparency, when the background image is visible, you can conditionally apply the position:fixed like this: http://codeply.com/go/4ElKQpnhy3

Upvotes: 0

samc449
samc449

Reputation: 58

Try this:

<nav class="navbar navbar-overlay navbar-inverse">
    <!-- more html -->
</nav>

Then in your CSS write this:

.navbar-overlay {
    margin-bottom: -104px; // Pulls the content under the navbar up by 104px which is the height of your navbar.
    z-index: 1; // Tells the browser that your navbar should be ontop of your content. This allows your links in your navbar to still work when you hover over them.
}

Upvotes: 1

Related Questions