Currently my nav nav-tabs are being pushed to a next line if i make my screen smaller, however i wish to keep them on one line and enable overflow-x when they pass the 768px breakpoint.
I cannot figure out how to make this work, can anyone help?
html
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<div class="min-width" ng-if="user.loggedIn" id="char-nav" bs-scrollspy-list>
<ul class="nav nav-tabs" role="tablist">
<li>Identity</li>
<li>Attributes</li>
<li>Skills</li>
<li>Spells</li>
<li>Passives</li>
<li>Equipment</li>
<li>Consumables</li>
</ul>
</div>
</div>
</div>
</nav>
current css
#char-nav {
border: none;
margin-top: 13px;
}
.nav-tabs {
border: none;
}
.nav > li > a {
padding: 8px 15px;
}
#media screen and (max-width: 767px) {
#char-nav {
display: inline-block;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
max-width: 80%;
margin-top: 0;
}
}
Here is a bit of css :
.min-width{
overflow-x:auto
}
ul.nav{
display:inline-flex
}
And a bootply : http://www.bootply.com/BRqVaRNnZP
Related
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
I'm almost crying. Okay, not that much. But I spent almost three days trying to find a solution for this problem and I can't find anywhere.
I'm using Bootstrap, so only a part of the CSS is available as the main classes I use the default from Bootstrap.
This is what I want to achieve:
This is what it's looking like right now (both mobile and desktop)
The live website: http://acessogestaocontabil.com.br/
And this is the code:
HTML
<!-- navHeader -->
<div class="container-fluid" id="header">
<div class="container d-xl-none">
<img src="img/footerLogo.png" class="img-fluid" alt="">
</div>
<div class="midias d-none d-xl-block">
<nav>
<i class="fab fa-instagram"></i> | <i class="fab fa-facebook-f"></i>
</nav>
</div>
<div class="container d-none d-xl-block">
<div class="row">
<div class="col-9">
<nav class="nav">
<li class="nav-item"><i class="fas fa-home"></i></li>
<li class="nav-item">Sobre</li>
<li class="nav-item dropdown">
Consultoria e Assessoria
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Assessoria Contábil
Pessoas
Fiscal
Tributária
</div>
</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contato</li>
</nav>
</div>
</div>
</div>
</div>
CSS/SASS
#header {
background-image: url('../img/bg-topo-desk.png');
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
min-height: 195px;
}
#header .nav {
background: url('../img/bgHeaderMenu.jpg') no-repeat #13165f;
position: absolute;
transform: none;
width: 100%;
top: 133px;
right: -184px;
overflow: hidden;
padding: 0px 20px;
}
#menuHeader {
position: relative;
right: 210px;
}
#header .nav a {
color: #FFF;
text-transform: uppercase;
}
#header .nav .nav-item {
border-right: 1px solid #3249b7;
}
#header .midias {
background: url('../img/bgSocialHeader.jpg') no-repeat #3d5cc7;
height: 40px;
position: absolute;
top: 133px;
right: 0px;
z-index: 1;
padding: 6px 180px 5px 60px;
}
#header .midias a {
color: #FFF;
}
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) {
#header .midias {
display: none;
}
}
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) {
#header .nav {
display: none;
}
}
The logo is inserted into the image, so it will show as a normal background in desktop. In mobile, I change to the a inserted image, with a link. I know is not the best scenario but it's what I was capable to do.
The navigation menu is the main problem. It looks okay in some resolution, but when I try to resize, it just breaks. I tried everything: two divs, two backgrounds, flexbox, position absolute, position relative and everything just fails.
Does anyone knows how to solve it? :(
For what I can suggest is - move the background to its own element, then you can remove all position: absolute declarations, as the other elements will neatly fall below it. As the image should, as I understand, displayed whole, the easiest way is to just use <img src="/img/bg-topo-desk.png" alt="header" style="width:100%"/>. (of course you should move the width declaration to css).
I have the following NavBar set up in Bootstrap. At the moment, it aligns so that the gaps between the links and logo are all the same distance. However, as the Link Names are different sizes this means that the Logo isn't actually in the middle of the navbar and looks a bit odd. How can I align the items, such that their centers are spaced equally?
<nav class="navbar navbar-default">
<div class="container-fluid" id="logoStripe">
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav links">
<li><h1>About</h1></li>
<li><h1>Pre-Order</h1></li>
<img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
<li><h1>News</h1></li>
<li><h1>Contact Us</h1></li>
</ul>
</div>
</div>
</nav>
CSS:
.links {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 28px;
color: #FFFFFF;
vertical-align: bottom;
margin-top: 0px;
}
.navbar-default{
border:hidden;
}
#logoStripe {
background-color: #54534a;
}
If you are sure that you will have only those four links, you can add this CSS code to your styles and it should work:
.links > * {
width: 20%;
text-align: center;
}
or
.links > img, .links > li {
width: 20%;
text-align: center;
}
This way you make sure that every item will take equal amount of space and its content will be centered.
I'm struggling with the alignment in the following navbar that uses Bootstrap 3.
Problem: The Login and Signup elements are on different rows. Whats the correct way to adjust them so that they are both on the same line? display: inline-block; and white-space: nowrap; does not appear to work on the li elements.
Note that the input element should fill up the space between the logo and the Login/Signup elements.
Bootply: http://www.bootply.com/Bh5TBV9vS0
<nav class="navbar navbar-default navbar-fixed-top">
HTML
<a class="brand" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" width="100">
</a>
<form role="form" class="form-horizontal search-form">
<!-- <i class="fa fa-search"></i> -->
<input type="text" class="form-control" placeholder="Search">
</form>
<ul class="nav navbar-nav">
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
CSS:
.brand {
width: 170px;
height: 80px;
background-color: #ccc;
display: inline-block
}
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
}
.search-form {
width: 100%;
height: 30px;
display: inline-block;
}
.search-form {
margin-top:10px;
padding: 0 10px;
}
nav { display: flex; }
Remove float:left for your list items and apply dispaly:inline-block and apply the style white-space:nowrap for your ul element.
ul.navbar-nav{ white-space:nowrap;}
.navbar-nav li{display:inline-block; float:none;}
I have updated width of .search-form from 100% to 76% and now it works fine.
Check here
I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block } (that's easy), but so I need the actual ul.dropdown-menu to stretch the full width of the page. I can't seem to figure it out.
Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)
Will probably need to wrap another element too, actually, as the ul needs to be centered.
So does anyone know how to do this?
EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:
.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }
and there you have it!
First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
check the demo here http://www.bootply.com/8EgGsi4F7w
<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">
just use the position: initial in the main li(dropdown) of your nav and in the child ul dropdown-menu set width 100%
Here the alternative that worked for me.
I just tried option 2. The key is:
Adding class position-static along with (the) dropdown class, which is the parent class of dropdown-menu as follows:
<li class="nav-item dropdown position-static">
Credit to its author: VigneshKannan3 from GeeksforGeeks
It looks like this answer to a similar question has the same approach.
Check this
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
text-align: center;
left: 0;
right: 0;
}
.dropdown-menu > li {
display: table-cell;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#media screen and (max-width: 767px) {
.dropdown-menu > li {
display: block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Blackcat</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Shop</li>
<li class="dropdown">
Artist <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Rich</li>
<li>Shay</li>
<li>Jose</li>
<li>Marie</li>
<li>Simon</li>
<li>Jamie</li>
<li>Andrew</li>
<li>Teddie</li>
</ul>
</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->
<!-- container -->
<div class="container">
<div class="row">
<p>Site content here...</p>
</div>
<!-- End row -->
</div>
<!-- End container -->