Hey so I’m trying to make my navbar transparent and overlay the computer image I have there. No idea how to do this and google isn’t doesn’t seem to want to help. And tips would be appreciated! Here’s my page https://codepen.io/MarcelPenn/pen/rPMRWp
What do you mean? I didn’t withdraw it, at least not intentionally.
Oh ok haha, my bad. I’m trying to so I’ll let you know if I figure it out!
Hi,
Try this bootstrap class in your nav tag:
navbar navbar-dark navbar-expand-lg fixed-top
1 Like
Read my adjustment code and try to figure it out why it works
.navbar {
position: absolute;
width: 100%;
z-index: 1;
background-color: rgba(52, 58, 64, 0.5)!important;
}
add fixed-top to your nav element class
as well as set the background-color property for “.navbar” to use rgba as @ostellarmississauga suggested
1 Like
Hey, this doesn’t seem to work on mine. I tried applying it directly to the “navbar” class as well as making a new class, “clear” which also didn’t work lol. Not sure what’s going on
Default navbar
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Justified navbar nav links are currently not supported.
Overflowing content
Since Bootstrap doesn’t know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest “small” or “tablet” screen).
Make navbars accessible
Be sure to use a element or, if using a more generic element such as a
, add a role=“navigation” to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
1 Like
Add !important to the position absolute (you need to overwrite the bootstrap CSS).
1 Like
Oh I’ll try that, I thought the !important was a comment for my benefit lol. Thanks!
Interesting concepts, thanks!
No it is actual CSS syntax. Just to be clear the CSS should look like this.
.navbar {
position: absolute !important;
width: 100%;
z-index: 1;
background-color: rgba(52, 58, 64, 0.5) !important;
}
More info on the !important exception
1 Like
That’s exactly what I’m looking for!
I’m looking for the code you used but can’t find it lol. I added the the “navbar” css but it doesn’t want to work on mine for some reason.
That’s brought me a lot closer, it’s clear now but not 100% but I should be able to get it from here. Thanks for the help!
I’m sorry should have added comments
.clear {
position: absolute;
width: 100%;
z-index: 1;
background-color: rgba(52, 58, 64, 0.0);
}
.navbar{
position: fixed;
top:0;
left: 0;
}
.banner {
position: relative;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
top:-80px;
}
No worries I have it now. Thanks for the help!!
cool beans, glad to help
one thing I used -80px, but you might want to change that to a % or something. not sure how well my code will scale as I was only trying to resolve the one issue
Ic yeah, I never changed that on mine. It’s seems to be working in context atm so I’ll leave it for now until I run in to problems, if that happens haha