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?
Related
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
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
I have a site that uses off canvas navigation. At a certain point the off canvas navigation will get too long and will start to overlap the footer. what can I do to push the footer down so there is no overlap?
I do not need a sticky footer. The footer just has to be below the navigation if there is a overlap.
Put this around your navigation:
<div style="padding-bottom: HEIGHT OF FOOTER">
<!-- Navigation markup -->
</div>
I have a top-bar menu but when the page loads it's somewhere in the middle of the page. When I scroll up, I set it to become sticky so it will then get pinned to the top as I scroll through the page. My question is, how do I make it so that some of the elements inside the top-bar only appear when it is already stickied to the top? When it is not stickied to the top, I want to hide some of the elements.
<style>
.only-sticky{
display: none;
}
.fixed .only-sticky{
display: inline-block;
}
</style>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar data-options="sticky_on: large">
always visible
visible only on sticky
</nav>
</div>
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.