need add bootstrap tag to My html file and display My menu items. but I do not need default navbar highlight box and hamburger icon when I visit My site using tab or mobile device.
<nav class="navbar navbar-default">
<li>Fixed top</li>
<nav>
how can do it?
Hello, just remove those line of code for removing the hamburger:
<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>
Try to be more specific about the "highlight box", but i assume that you will need some CSS to work around that.
Check this fiddle too.
If i understand your properly than please apply "hidden-sm hidden-xs" class to that "li" which you don't want in responsive mode.
Thanks,
Rohan Kacha
You can use of #media query. you must define width that you want hidden nav in it ,and use of max-width(The maximum width of the display area) or max-device-width(The maximum width of the device).
For example :
#media all and (max-width : 769px) {
.navbar {
display: none;
}
}
if width be less than 769px ,so nav is hidden.
#media all and (max-width : 769px) {
.navbar {
display: none;
}
}
<nav class="navbar navbar-default">
<li>Fixed top</li>
<nav>
Note:use of full page and resize browsers.
Related
I have this set of codes, taken from https://getbootstrap.com/docs/3.3/components/#navbar.
<button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
It is just a basic burger button for mobile or small view, nothing fancy. The Bootstrap 3 handle this manually when the horizontal viewport getting smaller at some rate the burger button appeared.
My question is that how can I manually show the burger button (instead of it magically shown through Bootstrap)?
define an Id for the button... and show/hide it from codebehind when your conditions are met
buttonId.Visible = True/False
Well, it's hidden by CSS if the screensize exceeds a certain width (768px).
#media (min-width: 768px)
.navbar-toggle {
display: none;
}
If you want to always show it, remove this rule or overwrite it with your own rule.
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.
When I make my browser window small, the text starting with "Open" ends up taking up several lines and I can't get the everything below to be pushed down lower. Instead, the buttons and hidden, and the main image is blocked by the text. How can I get the resizing to happen automatically? The site is: http://opensimulationsystems.org/
I tried adding "height:auto" to the navbar-header in Chrome developer tools, but "auto" isn't an option. I'm using Bootstrap Theme template.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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=".">Open Simulation Systems: The Common Agent-Based Simulation Framework (CABSF) & The Agent and Simulation Repository</a>
That's happening because navbar-brand class is floating.
One way of fixing that is using a media query for small screens on your css, setting navbar-brand to not float. Something like this:
#media screen and (max-width: 700px){
.navbar-brand {
float: none;
}
}
It is the float:left that is making it overlap. For smaller screen sizes you can apply specific styles with media queries like
#media (max-width: 500px) {
.navbar-brand {
float: none;
height:auto;
}
}
If you will remove float:left element style from .navbar-brand then you have to set your header again with padding and all the other things.
But if you remove height:50px from .navbar-brand then it will automatically set all the things. And in media query you can adjust with the width of .navbar-brand.
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.