I am using bootstrap3. I am facing one issue. I have a navigation menu and I need to insert my logo inside that as shown below.
Insert the logo so that it will stick to the nav bar?
When we scroll the body up , the body should not go beyond NAV bar. At present, its going upside of nav.
Can any one please tell us the design.
Thank you.
This is exactly what I had to do a while ago. This is what I did:
In the navbar header replace the main title <a class="navbar-brand" href="#">Project name</a> with your logo graphics <a class="logo" href="#"><img src="/img/your-logo.png"></a>like this:
<body>
<div class="top-banner"></div> <!--this keeps the top distance and also an ideal place for the top banner-->
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#"><img src="/img/your-logo.png"></a> <!-- your logo comes here -->
</div>
In your header include a custom css after the main bootsrap.css (keep your original bootstrap.css intact to be compatibel with future updates):
.top-banner {
height:107px; /* set this to whatever height your logo needs */
}
.logo {
position:absolute;
float:left;
top:-105px; /* again, use this to position your logo, you can also use left and right */
}
Then you can go in two directions, either set navbar's margin bottom to the appropriate height:
.navbar {
margin-bottom: 60px;
position: relative;
}
Or you can also put a subheader div right under your navbar:
<div class="subheader">
<div class="subheader-inner">
<div class="container"> </div>
</div>
<div>
And add this to your css:
.subheader-inner {
height:40px;
margin-bottom:20px; /* or whatever values you need */
}
This way you can use the subheader to display navigation or other info, depending on your design.
Hope this helps.
Related
Bootstrap 3 shopping cart is defined using bootstrap standard markup like
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<body>
<div class="container">
<div id="_info"></div>
<header class="row">
<div class="col-xs-12">
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Lüli navigeerimist</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
....
In mobile its content width is same as mobile screen width.
However user can drag content horizontally left so that ugly white space appears in left.
How to fix this so that unnessecary left dragging is not allowed?
Maybe some element in page causes this effect?
I tried to delete elements in Chrome developer tools Elements tab but horizontal scroling is still allowed.
The problem is your header and footer both have a hard set width to them. This would normally not be an issue with proper media queries but in my opinion in order to not have to worry about adding more media queries I would just change your CSS for the header like I have below:
#media only all and (min-width: 481px)
header, .wrap {
width: 100%;
margin: 0 auto;
}
For the footer, you have a facebook toolbar that has a lot of hardset inline widths. You can hack this together by wrapping the entire element in a div and applying width: 100%; overflow: hidden; to that div but I would strongly recommend you do more research on that plugin to make it function properly or find a better plugin that will give you better results.
This did it on my comp. I just disabled the set width of the header.
I have created an application where the search function is the most important part. Therefore, I decided to put the search form in the title bar to have it available on every page. Works great, only on mobile devices I have the problem that the fluid layout causes the search fields to cover up most of the screen.
Thus, it would be great to collapse this title bar on mobile devices the same way a navigation bar does. Unfortunately, I did not get this working. I tried solving this with a navbar which did not work at all (see below).
Another idea of mine was to create two different search bars, a collapsed one and a hidden one and use Bootstrap's .hidden-* and .visible-* classes. Not sure how this would perform, apart from that I have not figured out yet how to create a non-navigation title bar in Bootstrap.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid col-md-12">
<div class='row'>
<div class='col-md-8'>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.php">Home</a>
</div>
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</div>
<div class='col-md-4' style='padding-top: 7px;'>
<!-- Session & status information go here -->
</div>
</div>
</div>
</nav>
Any idea how I can show my search fields on large screens and collapse them on mobile devices?
You did not give us much to work with, but as far as the collapsing goes I would go for a combination of css and jQuery. Here is the gist of how I would go about solving this problem by simply creating your own little "bootstrap-like" collapse.
html: Make your own little navigation structure with a button that will display your form on mobile devices.
<ul class="search-nav">
<li class="collapse-button">ICON</li>
<li class="search-form">
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</li>
</ul>
css: Make the collapse-button not show on large screen devices. On small screen devices the collapse-button can be displayed, but the form has to be hidden by default. All of this can be achieved using media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.collapse-button{
display: none;
}
.search-form{
display: block;
}
#media (max-width: 480px){
.collapse-button{
display: block;
}
.search-form{
display: none;
}
}
jQuery: If the user clicks on the collapse-button the form will toggle between being displayed and not. Something like this:
$( ".collapse-button" ).click(function() {
$( ".search-form" ).toggle(function() {
$( ".search-form" ).css("display","block");
}, function() {
$( ".search-form" ).css("display","none");
});
});
This is just the general idea. I would probably actually go with setting max-height of the form to 0 and overflow:hidden on devices with small screen and a bigger max height on devices with a larger screen. This way you could add a css transition that would make it expand more fluently.
Question Background:
I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.
The Issue:
The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:
This is the navbar with the page fully expanded and working as desired:
This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:
This shows the NavBar fully collapsed:
The Code:
This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">FM<b>FC</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Welcome</li>
<li>Club</li>
<li>About Us</li>
<li>Gallery</li>
<li>Committee</li>
<li>Contact Us</li>
<li>Location</li>
<li><a href='#Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
</div>
</nav>
</div>
Any help in working out this issue would be appreciated.
The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..
One option is to use the full width container-fluid (this may not work for your design):
http://codeply.com/go/TfbwIivilI
Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best:
http://codeply.com/go/kcaXYh7ARB
It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css
#media(max-width:992px) {
.nav>li>a {
padding-left: 10px;
padding-right:10px
}
}
bootply.
I can make my logo fit in the Navbar. I just put it in the . However, I want my logo to protrude a little bit from the Navbar. That is, I want 10% of my logo above the navbar and 10% of it below the navbar and the rest of the logo should be centered in the navbar.
I'm using a template that was bought online from wrapbootstrap.com and the template obvouisly uses bootstrap. Here is the code for the navbar
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/images/logo.png" alt="Logo">
</div>
You could probably use z-indexes for that and make the image just that 10% bigger. So make a class for the logo`
.logo {
z-index: 2;
margin-top: -10px; /* You just have to play with this a little bit to get the preferred result*/
}
.navbar-header {
z-index: 1;
}
and then make the logo just a bit bigger. Play a little with the width and height.
`
I would use relative and absolute positioning. If your navbar has a height of 50px and the logo is 70px high you can set .navbar-header{position:relative; height:50px;} and .logo{position:absolute; top:-10px;} this leaves you with 10px above and below the navbar.
I'm building a site with Bootstrap. For some reason, the mobile navbar cuts off "Menu" as you can see here:
I'm just using normal Bootstrap responsive code for the navbar:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Menu</a>
<div class="nav-collapse collapse">
Trouble is, if I add any sort of padding, it adds too much padding to the non-mobile navbar and makes it look weird. Has this happened to anyone else?
In your theme.css file you have:
.navbar-inner {
border-radius: 0;
margin: -20px 0; <-- *
}
* This is putting your inner navbar off the top of the page. Either remove it or change it to -10px;