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
Related
I have a Bootstrap 4 navbar with a <div class="container"> wrapped around the navigation links, so the navigation is positioned exactly like the content on my page (which is also in a container)
I now want to add a search input outside of the container, aligned to the right side (visible only on XL screens, hidden otherwise)
I know how to align things, I can align it inside the container, but creating another <ul class="navbar-nav"> outside of the container actually messes everything up, so I'm not really sure how can I do it while also having a container in the navbar.
As far as I can see, it's the fact that container has an auto margin, and placing a form-inline right after the container messaes up the margins, even when using float-right
Here's a bootply: https://www.bootply.com/T9Ks167fW7
As for now I went with using a trick to make the inline form use position: absolute, this way it doesn't interfere with the margin of container so everything looks nice:
<form id="search" class="form-inline">
</form>
#search
{
position: absolute;
right: 0;
margin-right: 1rem;
}
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 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 sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed
I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
'overflow: auto' will add the scroll bar when necessary.
The trick is to make sure the content inside the scrollable element exceeds the normal width of the element, instead of simply reflowing onto a new row in which case it'll never trigger a scroll bar. One way to do this is by using 'white-space: nowrap'.
You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.
Some example html:
<div style="width: 50px; overflow-x: scroll">
<p>Hello world!</p>
<p>Here is a div with a horizontal scrollbar!</p>
</div>