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?
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.
}
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
Related
I have a navbar:
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Brand</span>
<a>I wanna grow</a>
</nav>
I want to make the link inside the navbar grow to fill the available height (the height of the blue area):
Why doesn't this code work? How can I make it work?
In order for the percentage value on your anchor tag to work, the parent height of your navbar needs to be explicitly set.
Try something along the lines of:
.navbar{ height: 100px; }
The only exception to this rule, whereby the height can be figured out implicitly, is the documents root element <html>.
I'm using bootstrap3 with navbar-fixed-top in my project. In mentioned navbar, there is a DIV which height is about 700px and this makes entire navbar stretch for this 700px and covers my content (I'm not able to click inside inputs of main container).
Can somebody help to set the overflow parameter properly, so my element inside navbar doesn't stretch entire navbar, however stays "outside" of it?
<nav class="navbar navbar-default navbar-fixed-top">
...
<my-custom-widget></my-custom-widget> <!-- this is the widget with height of 700px -->
...
</nav>
Thanks.
G.
if you are creating any custom widget then you can set that widget's position attribute to absolute or fixed and if you want to prevent it from oversized then you can use overflow property of css
checkout this pen for example
my-custom-widget{
position: absolute;
top: 0;
right: 0;
}
https://codepen.io/anon/pen/XaezNr
You can set a fixed height of the navbar and then set overflow to hidden. It should solve your problem. But if you have drop-down menu in that navbar then you can't see the sub-menu items anymore because of hidden overflow
I ran rails generate scaffold pins description:string. The header covers pins as below. I don't know how to fix this. I tried some with css but didn't work. Does anyone know solutions for this?
You could try applying margin-top to the content of the page. The margin should be the same height as the header or greater.
I assume you are using a bootstrap navbar - you need to add padding to avoid the overlap - from navbar docs
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
I have a fixed nav-bar:
<div class="container-fluid topsearch" id="nav">
<!-- content for top search here -->
</div>
JS Code:
/* fixed nav topbar */
$('#nav').affix({
offset: {
top: $('.topsearch').height()
}
});
Which works but:
The navigation bar is underneath another topmenu, so its not directly a sticky, it sticks until you pass by the navbar (which is good). But when you scrolldown the content underneath the navbar jumps up X pixels (X = height of navbar) so its under the navbar. How do it fix this?
I want to use http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/ for this navbar, but it doesnt seem to work with the affix method. Anyone got a fix?
I have a website setup using bootstrap and have the navbar done to my liking. Now I have to work on my container. I wanted something like this image here (http://awesomescreenshot.com/0d61zypfff). The main container overlaps the navbar a little bit. I have used these classes for my navbar and have laid out what I think would be the ideal layout of the code..
<div class="navbar navbar-inverse navbar-static-top" role="navigation"></div>
<div class="container"> //Please do not add any styling to the container
<div class="index"> //background: #ffffff;
This text overlaps the menubar
</div>
</div>
I have added extra padding-bottom to the navbar to make the navbar a little more "buff" and want my index section to overlap it.
Please let me know if I need to add more information.
To add onto #isherwood, you must also set the z-index: -1;. This will make it so that the index div will overlap the navbar.
A little negative margin should do it:
navbar {margin-bottom: -20px;}
Or:
.index {margin-top: -20px;}