I am trying to make a navbar which hides text on smaller screens. I cannot get the bar to align correctly!
http://jsfiddle.net/blisstdev/ZrA3u/10/
http://jsfiddle.net/blisstdev/ZrA3u/10/embedded/result/
As you can see, the left side is lower than the right!
Also, the first list element of the 'ul' on the left does not fill the size of the 'ul' container, yet all the other list elements do. Why is this?
Thank you very much!
<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
<div class="container-fluid header-top">
<ul class="navbar-nav navbar-left pull-left list-inline contact-links">
<li class="header-link-container"><a class="visible-xs call-link" href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a><span class="hidden-xs header-link-text">1-800-GARMANTS</span></li>
<li class="header-link-container"><a class="to-do magento-add-in chat-link" href='****live chat**'><span class="glyphicon glyphicon-comment"></span><span class="hidden-xs header-link-text">Chat</span></a></li>
<li class="header-link-container"><a class="magento-add-in email-link" href="mailto:ryan#garmants.com"><span class="glyphicon glyphicon-envelope"></span><span class="hidden-xs header-link-text">Email</span></a></li>
</ul>
<ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
<li class="header-link-container"><a class="account-link" href="my-account.html"><span class="glyphicon glyphicon-user"></span><span class="hidden-xs header-link-text">My Account</span></a></li>
<li class="header-link-container"><a class="cart-link" href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span class="hidden-xs header-link-text">My Cart</span></a></li>
</ul>
</div>
</div>
On small screens, the anchors are set to display: block, while this is not the case for the anchors in the right hand list. Just make sure to apply the same styles to each list and they will behave in the same way.
I updated you FIDDLE you need to set the same padding to the first <li> item in the left nav-bar like this
#media (min-width: 768px) {
.contact-links.navbar-nav > li.header-link-container:nth-child(1) {
padding-bottom: 15px;
padding-top: 15px;
}
}
should do it.
Related
I'm using bootstrap 4 and I have a problem with navigation .nav .dropdown-menu and .text-truncate on mobile view when content text length is too long, it can't be ellipsis.
I have try set max-width 100% to .dropdown-menu so children element only expand maximum to parent width.
screenshot actualy happen
here the code
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-husr-navbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapse-husr-navbar" style="">
<ul class="navbar-nav" id="navbar-husr-right">
<div class="d-block d-sm-flex">
<div class="p-2 text-truncate">
<span class="d-inline">
<i class="fas fa-map-marker-alt"></i>
<small><span id="husr-branch-name">DUMMY BRANCH A</span></small>
</span>
</div>
</div>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
<span class="d-inline d-sm-none d-md-inline d-lg-inline">Menu</span>
</a>
<!-- here the first I try to put max-width:100%; so children element can't push parent to expand, but not work. :( -->
<div class="dropdown-menu dropdown-menu-right show" style="max-width:100%">
<span class="dropdown-item-text text-nowrap" style="
">
<i class="fas fa-user"></i>
<span id="husr-user-name">Staff User</span>
(<em><span id="husr-user-type">STAFF</span></em>)
</span>
<!-- here the second I try to put max-width:100%; so children element can't push parent to expand, but also not work. :( -->
<span class="dropdown-item-text head-email" style="max-width:100%">
<!-- here the third time put max-width:100%; so children element can't push parent to expand, butthis also not work. :( -->
<div class="text-truncate" style="max-width:100%">
<i class="fas fa-envelope"></i>
<span id="husr-user-username">i_mean_it_to_be_ellipsis_text_truncated_but_container_div_still_expanded</span>
<!-- yeah the text has no space because it contain an email that should be nospace -->
</div>
</span>
</div>
</li>
</ul>
</div>
</nav>
screenshot expected
For text-overflow to work, you need a max-width but also overflow: hidden. You should be able to remove the text-truncate div and use this CSS:
.head-email {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}
From the MDN documentation for text-overflow:
The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space.
EDIT:
In your case bootstrap under 576px doesn't limit the size of the navbar itself. Adding a max-width: 100%; on your div with class navbar-collapse fixes smaller viewport sizes.
I am trying to add the
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?
You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.
[body > .container > .navbar > .container]
To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.
change to [body > .navbar > .container OR .container-fluid]
ONE MORE THING TO SAY
[Practice makes perfect]
It is not going outside of the navbar. You have nested two container. The padding in containerplays the part here.
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
container in bootstrap is 1170px width having padding-right:15px , padding-left:15px .( I am viewing it in a screen resoultion > 1200px) .Your navbar have a total space of 1140px now (1170px - 30px = 1140px) which has a background colore property. As you again adding a container , It is occupying a space of 1170px now which exceeds 1140px. So in both side , a extra 15px white space gote added. Furher , The nested "navbar-right" has "margin-right:-15px" that push your nav further.
Simply construct this way :
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right ">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
This is how a bootstrap navbar is made:
Navbar with no container wrapping it, but a container-fluid inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts
</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
</li>
</ul>
</div>
</nav>
P.S.: view the results in full page for better viewing
I am building a portfolio project using Bootstrap. I wanted to have the navbar be responsive but not use the default hamburger menu. Instead, I have a media query that changes the text links into icons. However, when the screen is resized to 767 and below, the icons collapse into a second row. I want them to just get closer to the navbar header.
I've been searching all day but everyone else seems to be asking about adding the hamburger menu.
Any suggestions?
http://codepen.io/anthkris/pen/xwpPrE/
<!-- Fixed navbar -->
<nav id="mobile-nav" class="navbar navbar-default navbar-fixed-top">
<div class="container nav-mobile">
<div class="navbar-header">
<a class="navbar-brand" href="#">K. Anthony</a>
</div>
<div>
<ul class="nav navbar-nav navbar-left">
<li>
<i class="fa fa-home"></i>
</li>
<li>
<i class="fa fa-file-photo-o"></i>
</li>
<li>
<i class="fa fa-book"></i>
</li>
<li>
<i class="fa fa-envelope"></i>
</li>
</ul>
</div><!-- #mobile-nav -->
</div>
</nav>
If you want the navigation to stay the same and just change icons you can try:
#media only screen and (max-width : 768px) {
.navbar-header {
float: left;
}
.navbar-nav {
float: right;
}
}
This will pull the header, which is your name to the left and the icons to the right. Keeping it the same as if you have it with the words.
#media only screen and (max-width : 768px) {
.navbar-header {
display: inline-block;
float: left;
}
}
Try this in media query this might help you.
Is there a Bootstrap3 component that simply collapses a menu at a breakpoint without adding a toggle. For example, if I have a horizontal menu that looks like this on desktop
at screen widths below 768px I would like it to simply stack without collapsing into a toggle like this
Any thoughts?
Remove the collapse button and the navbar-collapse class. From the getbootstrap.com examples, something like this should do the trick:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
You will have to add a media query to make sure that padding is added to the content in mobile display.
I have made a Bootply here where I added the following CSS to make it work:
#media screen and (max-width: 768px) {
#wrap > .container {
padding-top:200px;
}
}
I integrated twitter bootstrap navbar into my asp.net project. However, I'm trying to align my bootstrap text into the center. Here is my source code for my navbar
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li>Home</li>
<li class="divider-vertical"></li>
<li>Login</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the image of my bootstrap
Then i added this twitterbootstrap css inside to attempt and shift the ipolice, home, contact and login into the center
#twitterbootstrap {
position:absolute;
text-align:center;
}
which didnt work. I visited this link and tried but still wasn't able to do it. May i ask how do i align my text into the center?
Depending on where you want the Brand link to appear, here are two possiblities
http://jsfiddle.net/panchroma/cW9sA/
or
http://jsfiddle.net/panchroma/GWMnF/
EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/
Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports
Important CSS is
#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
#twitterbootstrap .navbar-inner {
text-align:center;
}
Some of this CSS is based on an answer from Andres Ilich
Good luck!