How can I center my div inside a separate div with a class footer navbar-inverse navbar-fixed-bottom in bootstrap? Here's my exact code.
<div class="footer navbar-inverse navbar-fixed-bottom">
<div class="center-block">
<div class="small navbar-text text-center">
First Line<br />
Second Line<br />
Third Line
</div>
</div>
</div>
Image in Fullscreen:
But if I resize the width of my browser, the position is fine.
.navbar-text was floating to the left.
Fixed it for ya :)
Related
I have two bootstrap containers, one inside header navbar of the page, the second below navbar. Inside each container there is some text. I want text that is in the navbar container to be shifted to the left by 15 px for all responsive breakpoints.
I tried to do this using a negative margin. Here is my code:
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>
and JSFiddle example.
This method works, but it has a serious bug. When the width of the browser decreases, text in header navbar starts to go beyond the screen. Is there any way to avoid this? Of course it is clear that I set up margin using #media, but I think this is not quite the right way.
If you use the right way of nesting elements in Bootstrap you will end up with an aligned left side: .row will give you -15px to the left to counter the 15px left padding on .col-xx-xx. What you could do is to add 15px padding to other containers and let the navbar keep the normal bootstrap container max-width... That will keep the default 15px padding on the navbar on mobile/tablet etc.
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container">
<div class="row">
<div class="col-sm-12">Text</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-inner">Text</div>
</div>
</div>
</div>
Codepen Example
You can use navbar-fixed-top instead of fixed-top for navbar section. In Bootstrap 4 adjust margin-left by using default css class ml-1,ml-2,.. and padding pl-1,pl-2 as follows.
Ref Bootstrap 4 spacing
<nav class="navbar navbar-default navbar-fixed-top bg-primary">
<div class="container">
Text 1
</div>
</nav>
<div class="container">
<div class="ml-4 mr-4">
<p>Text 2</p>
</div>
</div>
Try your ans here: https://jsfiddle.net/testdesigner/aq9Laaew/193572/
I'm trying to have both a top fixed menu and a left vertical menu on my website. I really want both to be fixed but if I start to scroll then the left vertical menu will slide up underneath the top menu as shown in the code below and the jsfiddle:
<div class="ui inverted top fixed menu">
<div class="header item">
Top Menu Header
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<div class="ui inverted left vertical fluid menu" id="side-menu">
<div class="item">
Item #1
</div>
<div class="item">
Item #2
</div>
</div>
</div>
<div class="twelve wide column">
<!-- Main content here -->
<div class="row">
Text here
</div>
<div class="row">
Text here
</div>
</div>
</div>
https://jsfiddle.net/318ruL3j/2/
If I use a fixed vertical menu, then the first item is hidden underneath the top menu as shown in the code below and the jsfiddle:
<div class="ui inverted left vertical fixed menu" id="side-menu">
<div class="item">
Item #1
</div>
<div class="item">
Item #2
</div>
</div>
<div class="ui inverted top fixed menu">
<div class="header item">
Top Menu Header
</div>
</div>
<div class="ui grid">
<!-- Main content here -->
<div class="column">
<div class="row">
Text here
</div>
<div class="row">
Text here
</div>
</div>
</div>
https://jsfiddle.net/z5vozbts/2/
I hope what I'm trying to do makes sense. Does anyone know how I can have both of these fixed menus without my items getting overlapped?
A quick CSS entry?
#side-menu {
height: 100vh;
padding-top:2.0em;
}
Thanks for the answers. I ended up using jQuery to make my solution a little more dynamic because my top fixed menu can vary in height. I changed the top padding of the body to match the height of the top menu using this code:
$('body')
.css('padding-top', $('#top-menu').height());
Adding padding to the top of the body pushes down the ui grid containing my side menu.
make an empty area above of your vertical menu, means enlarge your menu with an invisible element that has a same height as your fixed element
#side-menu {
height: 100%;
}
.fake_area {
position:relative;
display:block;
width:100%;
height:40px;
}
.
.
.
<div class="header item">
Top Menu Header
</div>
</div>
<div class="fake_area"></div>
<div class="ui grid">
<div class="four wide column">
.
.
.
check it
I am trying to affix menu nav bar on top fixed, but somehow the bar layout and "social icons" and "search box" I have get all messed up. I tried changing line 7 from relative to fixed position, but no luck.
Basically what I have now is the menu is on top, when you scroll down, the menu disappears for a while and then pops up again to stay affixed on top when scrolling down. No clue why the menu disappears for a sec when scrolling down to come back, but basically now I want the menu nav bar fixed on top permanently and not disappear for a sec when scrolling down. And ofcourse the current layout / width and all to stay in tact. Is it possible to achieve this somehow?
My BOOTPLY::: BOOTPLY
/* CSS used here will be applied after bootstrap.css */
.menu-container {
background-color:#000;
border-bottom:4px dashed #FFBB3A;
min-height:20px;
position:relative;
}
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<h1>MENU</h1>
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
</div>
</div>
<div class="clearfix search_and_social">
<div class="clearfix navbar navbar-custom-search">
search box
</div>
<div class="clearfix navbar navbar-custom-social">
social icons
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
It looks like you're using the Bootstrap Affix Plugin and don't have it configured properly or it is doing something a little different from what you expected. The Affix plugin is setup to trigger a "sticky" header after scrolling some distance or to some element.
This will get you what is going on in this Bootstrap example.
Solution
Remove/disable Affix plugin.
Add .navbar-fixed-top to your #nav element. Then add padding-top to the body element that is equal to the height of your #nav element, which is currently 181px.
I have three divs like this:
<div class="container-fluid">
<div class="header">
Welcome
</div>
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Now, the first div class="container-fluid" is stretched on all browser window. The next class="header has padding/margin of some pixels from his parent element. Now I´d like this div to stretch all browser window out. But I also don´t want next class="menu" or class="content" to be stretched out.
How may I solve this?
Use .container for navbar and content & .row for .header like this: Demo
<div class="row">
<div class="header col-xs-12 col-sm-12 ">Welcome</div>
</div>
<div class="row">
<div class="container">
<div class="navbar">Menu</div>
<div class="content">Website content</div>
</div>
</div>
This sounds like a two-column layout with a full-width header. You tagged Twitter Bootstrap so I'll explain how to use those styles to do what you want.
<div class="row container-fluid">
<div class="header">
Welcome
</div>
<div class="span3 navbar">
Menu
</div>
<div class="span9 content">
Website content
</div>
</div>
The row class is on the element that wraps the columns. span# is the class that gives each column its size. So for a 12-unit width, you could assign span3 to the navbar and span9 to the content area.
Without Bootstrap, this is still relatively simple. You can do this in CSS.
.navbar {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 75%;
}
<div class="container-fluid">
<div class="header">
Welcome
</div>
</div>
<div class="container">
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Use container class outside menu and content. Hope this will help you.
jsFiddle Demo
I'm new to bootstrap and I wonder how can we give an element a full width of the screen? for example I have an <hr>element that I want it width to be take the full screen.
I notice that row is taking -15px margin-left and margin-right, how can we remove that margin without affecting other rows in the website?
Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (See full screen for better view)
HTML:
<div class="row">
<div class="content">
<div class="container">
<h1>Welcome to my website!</h1>
</div>
<div class="container-fluid">
<hr>
</div>
</div>
</div>
Thanks!
You simply have to put it out of the container.
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
<hr> <!----- here -->
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>