Change bootstrap menu according to page width - html

I'm developing a web application and I put in my application the bootstrap menu I would like when the application reaches the maximum width of max-width: 770px the menu would be the same as the menu that is in the normal width of the page.
But when giving the display none in the menu navbar-header it does not exit and the menu nav navbar-nav does not appear in the maximum width of the page of 770px
Menu in the normal width of the page
Menu at the maximum width of 770px
<div class="body-wrap" >
<nav class="navbar navbar-inverse" role="navigation" id="azul">
<div class="container-fluid">
<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" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="conteudo"><li>Pagina Principal</li></div>
<div class="conteudo"> <li>Contato</li></div>
<li class="dropdown">
<div class="conteudo"> Produtos <b class="caret"></b></div>
<ul class="dropdown-menu">
<li>Camisetas</li>
<li class="divider"></li>
<li>Calças</li>
<li class="divider"></li>
<li>Bermudas</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
#media (max-width: 770px) {
body{
background-color: yellow;
}
.navbar-header{
display: none;
}
.nav .navbar-nav{
display: inline;
}
}

I am not sure If I got what you mean but if you want to disable navbar-collapse you can simply add this CSS:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
Fiddle here

You can simply remove:
the button in element with class "navbar-header"
remove css classes "collapse navbar-collapse"
In this way the button disappear and you don't need to add extra css rules.
The main bar will remain visible with all widths.

Related

Social Media icons in navbar horizontal spacing

I'm building a personal portfolio and I have a navbar with title, social media icons and navigation links. When viewing on mobile, the social media icons appear vertically under the title. I would like them to show up horizontally next to the title, so in between the title and the icon bar.
HTML:
<nav class="navbar">
<div class="container-fluid">
<!-- Navigation Bar -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<div class="navbar-header">
<a class="navbar-brand text-center" href="index.html">Title Website</a>
</div>
<!-- Small social media icons -->
<ul class="nav navbar navbar-nav navbar-left pull-left">
<li></li>
<li></li>
<li></li>
</ul>
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
<ul class="nav navbar-nav text-center">
<li><b>Home</b></li>
<li><b>Projects</b></li>
<li><b>CV/Resume</b></li>
</ul>
</div>
</div>
</nav>
CSS:
/* Navigation */
.navbar-header {
vertical-align: baseline !important;
}
.navbar-brand {
text-align: center;
font-size: 30px;
vertical-align: baseline !important;
}
.icon-bar {
background-color: black;
}
nav ul {
display: inline;
}
nav li {
display: inline;
padding: 10px;
}
Any help would be appreciated. Also, I would like the title to be vertically aligned when viewing on desktop. I tried navbar-brand {vertical-align: middle !important} but that did not work.
Thank you.
-Z
Got the icons how I wanted them by playing around. New code:
HTML:
<!-- Small social media icons -->
<ul class="nav navbar navbar-nav navbar-left pull-left">
<li id="socmed"></li>
<li id="socmed"></li>
<li id="socmed"></li>
</ul>
CSS:
#socmed {
display: inline-block !important;
float: left !important;
}

How to make Bootstrap Navbar "non-responsive"?

I am using Bootstrap to design a webpage. In that I am using Bootstrap Navbars however I don't want them to be responsive. I tried making changes to variables.less file, adding .container { width: #container-desktop !important; } to my css file but none has worked so far. My code is as follows:
<div class="navbar-custom navbar-default navbar-fixed-top">
<div style="width: 95%; margin:0 auto;" >
<div class="container-fluid">
<a class="navbar-brand" href="http://someURL/"><img src="images/someImage"></a>
<div>
<ul class="nav navbar-nav myCustomClass1">
<li><span class="name">Welcome Mr Blah, Blah </span></li>
<li><span class="logo1">someStuff</span></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top test">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div style="width: 95%; margin:0 auto;" >
<ul class="nav navbar-nav align-nav-items">
<li ng-class="{active: someThing}">aaa</li>
<li>bbb</li>
<li ng-class="{active: someThing}">ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
<ul class="nav navbar-nav myCustomClass2">
<li><span class="glyphicon glyphicon-user"></span>xxx</li>
</ul>
<div>
</div>
</div>
</nav>
Please forgive the slightly faulty indentation. The custom css classes are:
.myCustomClass1
{
float: right;
margin:0 auto;
margin-top:1.5%;
}
.myCustomClass2 {
float: right;
margin:0 auto;
}
Is there any way by which I can make such code non-responsive? What I essentially want it to do is instead of responsively changing the design, I want it to get clipped good old fashioned way and make the page horizontally scrollable.
You don't want this in the markup:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
also change
<div class="collapse navbar-collapse" id="myNavbar">
to
<div id="myNavbar">
Change the css for .nav > li and .nav > li > a. Both should be display: block by default (Bootstrap). Change them to display: inline. Style the rest according to your needs.
Edit based on user's JSFiddle:
Is this how you want it? JSFiddle
I've added:
.navbar-inverse {
/* other styles */
height: auto;
overflow-x: auto;
}
.align-nav-items {
min-width: 390px;
}
.nav > li, .nav > li > a {
display: inline;
}
To make navbar non-responsive and all other keep responsive just do the following:
.navbar.navbar-inverse.navbar-fixed-top.test{
min-width: 1200px;/*define as you require*/
}

Bootstrap 3 re-order the layout of navbar in small screen

Currently I'm learning Bootstrap 3 and I need help with re-order the layout of navbar in small screen.
I've followed the example in LINK
I've replaced Default / Static / Fixed with user profile
So what I want to change is when the screen is small I will have
|---------- BRAND ----------|
|[-]----------------------profile|
Here is my sample code:
#media (max-width: 767px) {
.navbar-brand {
width: auto;
float: none;
border-bottom: 0 solid transparent;
margin: 0 -15px;
}
.navbar-toggle {
float: left;
}
.nav-user-profile .navbar-nav {
margin: 0;
}
.nav-user-profile .navbar-nav>li {
position: static;
float: left;
}
.nav-user-profile .navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
How can I achieve it?
Thanks for ideas
I think this is what you're trying to do based on your diagram. Probably the simplest way to go is to create a div above the navbar for a second brand location. You can hide one or the other brand location with a hidden/visible class. And the profile link can be placed inside the navbar-header so it's visible across all viewports, it just needs to be positioned correctly on the right and the navbar-toggle floated to the left.
See working Snippet.
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header class="visible-xs-block"> <a class="header-brand" href="#">Brand</a>
</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-nav" aria-expanded="false"> <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 hidden-xs" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
I only added text-right very simple look where I noted with //changes*
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
//changes*
<ul class="nav navbar-nav text-right">
//changes*
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
pull-right class may help you...
or
bootstrap is divided to 12 columns for large, medium and small size
So when it breaks into small size give brand to full 12 columns using col-sm-12 class so it will break profile to down

Boostrap navbar center content

I need to center some content in bootstrap navbar
trying and copy from other post but isn't working...
Bootstrap: center some navbar items
JSFiddle example
my code:
CSS:
.navbar-nav ul > .center-nav {
display: inline-block !important;
left: 0 !important;
right: 0 !important;
text-align:center !important;
width:70% !important;
}
.navbar-nav > .center-nav ul, .navbar-nav > .center-nav li a {
display: inline !important;
float: none !important;
line-height: 40px !important;
}
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Place your center navigation after the right in your markup. Remove floats, display the center nav items as inline-block and align them centrally.
Note that since this changes the order of your markup, a mobile device will list the right navigation items before the centre ones.
HTML
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
#media screen and (min-width: 768px){
.center-nav{
float: none;
text-align: center;
}
.center-nav > li{
float: none;
display: inline-block;
}
}
JSFiddle
If I understand your question correctly you are wanting to center the li's with the class name center-nav.
Add the following to your css if that's what you are looking for:
.center-nav {
text-align: center;
}
You're using this Bootstrap class:
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
navbar-right
Which clearly floats that part of the navbar to the right.
You should try to look into the classes you are using, especially if taken from a framework, and ESPECIALLY if taken directly from a template.
The !important will have no effect if your custom CSS comes before the Bootstrap CSS, which is probably what's happening.

removing floats from bootstrap navbar without affecting layout

hey guys i am basically new to css and trying to build a bootstrap navbar ,the issue is that i had to center certain contents of the navbar I.E , center the menu items .
basically after going through the source of the bootstrap navbar i figured out that the reason all elements in the navbar appear in one line rather then moving on to the next line is because the elements in the navbar are floated either right or left , the movement you remove the floats the alignment is broken ,
so what i tried to do is : - HTML code(TYPICAL bootstrap markup) :
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
</nav>
And the CSS(customized css) :
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
width: 300px;
}
.navbar-default .navbar-collapse ul.navbar-nav li {
float: none;
display: inline-block;
}
.brand-holder {
height: 200px;
background: #000;
}
.navbar-fixed {
position: fixed;
width: 100%;
}
The thing to notice is see how i have removed the floats in ul.navbar-nav and ul.navbar-nav li
Fiddle here . , now see how the contents of
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
is floated to the next line . is there anyway that i can have the contents back inline with the menu items ?
P.S. :: i would really like to avoid using absolute positioning .
Thank you.
Alex-z.
If my understanding of your question is correct, probably by changing the CSS as below
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
text-align:left;
and instead of keeping an another UL for the FB Logo keep the whole Li as in the first Ul itself and aligning to right, should help
so the final html will be
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand --> <!-- </div>-->
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li style="float:right"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
You can have a check on the result fiddle
Hope this helps.
Thanks,
Philemon