extend side menu line for bootstrap page content - html

Currently, the line dividing the content and the side menu stops at the side menu's content. However, the content will be longer than the side menu. It makes the page uneven. I tried manipulating the page-content d-flex but i am not successful.
Using template from https://bootstrapious.com/p/admin-template
Below is the code for the side menu
<div class="page-content d-flex align-items-stretch">
<nav class="side-navbar">
<!-- Sidebar Navidation Menus-->
<ul class="list-unstyled">
<li class="active"> <i class="icon-home"></i>Home </li>
<li><a routerLink="/dashboard"> <i class="icon-picture"></i>Dashboard</a></li>
<li><a routerLink="/tasknotification"> <i class="icon-padnote"></i>Task Management</a></li>
<li><a routerLink="/candidate"> <i class="icon-user"></i>Candidate Management </a></li>
<li><a routerLink="/job"> <i class="icon-interface-windows"></i>Job Management</a></li>
<li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
class="icon-interface-windows"></i>Example dropdown </a>
<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
<li>Page</li>
</ul>
</li>
</ul>
</nav>

nav.side-navbar {
text-align: left;
min-width: 250px;
}
.page-content {
min-width: calc(100% - 250px);
}
This way side-menu won't collapse. As I saw your fiddle I think that might work

modify media query
#media (max-width: 1199px)
nav.side-navbar {
text-align: center;
overflow: hidden;
}

Related

HTML / CSS Set everything on the same line

My problem is this: when inserting a new button in navbar the User Name goes to the bottom line. My goal is for everything to be aligned on the same line.
I have already used display: inline-block and flex-direction: row but it did not work. Can someone help me?
HTML
<div class="col-md-10 p0">
<div class="collapse navbar-collapse" id="min_navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Tabelas</li>
<li>Registo</li>
<li class="dropdown submenu">
Quem Somos
<ul class="dropdown-menu other_dropdwn">
<li>About Us</li>
<li>About Us-2</li>
</ul>
</li>
<li class="dropdown submenu">
Serviços
<ul class="dropdown-menu other_dropdwn">
<li>Services</li>
<li>Services-2</li>
</ul>
</li>
<li class="dropdown submenu">
Notícias
<ul class="dropdown-menu">
<li>Últimas Notícias</li>
<li>Notícia Singular</li>
</ul>
</li>
<li>Contactos</li>
<li>Login</li>
<li><i class="fa fa-search"></i></li>
<li class="dropdown submenu">
<img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
Your navbar may be too big, so it won't work. But, if it is not too big, this might work:
Here, add a class. I chose floater:
<li class="dropdown submenu floater">
<img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Logout</li>
</ul>
</li>
In your CSS, do:
.floater {
float: right;
}
You may have some extra margin or padding somewhere in your code, so I would check that.
Please, consider moving from float to flexbox or grid to set position of elements!* We have "killer-features" in CSS nowadays, like Flexbox or even better CSS Grid (but there's some lacks of browser support). Yep, it's quite difficult to handle it at the begining, but when you'll understand how to roll with it - you'll love it!
I have already used display: inline-block and flex-direction: row but
it did not work. Can someone help me?
You can't combine display: inline-block with flex-direction, because you're trying to combine flex with blocks. You should use display: inline-flex instead.
HTML Markup:
<ul class="d-flex">
<li>Lorem, ipsum.</li>
<li>Ad, quas.</li>
<li>Recusandae, minima.</li>
<li>Tempore, sint.</li>
<li>Consequuntur, porro.</li>
<li>Ipsum, at!</li>
</ul>
SCSS Markup:
.d-flex {
display: inline-flex;
}
ul {
li {
display: inline-flex;
margin: 0 10px;
padding: 2px 8px;
border: 1px solid black;
border-radius: 4px;
}
}
Here you can try with flex:
https://codepen.io/dstolarski/pen/XOYEwR

Sticky top navbar without having the logo resize

I have the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<nav class="col-sm-6">
<span class="pull-left">
<a href="#" class="navbar-left">
<img src="img/gyn.png" alt="" class="logo">
</a>
</span>
</nav>
<nav class="col-sm-6">
<span class="pull-right">
<ul class="nav navbar-nav thmbl">
<li><a class="tupac" href="#team"><strong>TEAM</strong></a></li>
<li><a class="tupac" href="#services"><strong>SERVICES</strong></a></li>
<li><a class="tupac" href="#gal"><strong>GALLERY</strong></a></li>
<li><a class="tupac" href="#location"><strong>LOCATION</strong></a></li>
</ul>
</span>
</nav>
</div>
</div>
</nav>
For the life of me I can't understand why the logo is displaying at full size and not being contained in the Navbar. I basically want the logo on the left and my menu items on the right. Moreover, I want them to always be on the samle line, i.e. when I resize the windows (or on a smaller screen like an iPhone for example), it scales down. Maybe I have tunnel vision but can anyone perhaps point out the problem?
Can't say for sure without looking at your css, but images will only be resized if the logo class is configured correctly. You may want to look at this example https://codepen.io/bootstrapped/pen/KwYGwq on how to configure css properly.
For what concerns wrapping, the default behaviour is to wrap especially as you are dividing the screen in 2 columns when small. An option is to play around with CSS (see How to make bootstrap 3 navbar not wrap). Alternatively, play with column sizing so that a small logo doesn't take half screen real estate and the menu items are scaled correctly. For very small screen, the best option is to collapse and show a vertical menu.
This code from bootply should do what you need:
<div class="container example2">
<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="#navbar2">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
and this is the CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand>img {
padding: 7px 15px;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
body {
font-family: "Lato";
}

Menu is underneath content of page (z-index)

I am working on a clients website on Shopify and for some reason the dropdown menu seems to go underneath the product display and filter. I have tried changing the z-index but have had no luck.
Would anyone know what the issue might be? Here is a link to the page having trouble: https://livingtextiles.com/collections/test-collection
<header id="header" style="background-color:#fff!important;">
<div class="header-top pbf-header-top">
<div class="container pbf-container">
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="logo">
<img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752">
</div>
<nav class="menu-top">
<ul>
<li class="level-1 dropdown">
<a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
<ul class="menu-level2 dropdown-menu pbf-column">
<div>
<li class="level2"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
</div></ul>
<li class="level-1 dropdown">
Collections
<ul class="menu-level2 dropdown-menu">
/*** CSS ***/
#header {
display: block;
float: left;
width: 100%;
}
set position:relative and z-index:99 to the #header, this will fix your problem
#header {
position:relative;
z-index:99;
}

Insert image at right of dropdown on Boostrap

I'm using Bootstrap to create a navbar in the top of the page, but i'm facing some problems:
After opening the navbar dropdown, I need to have a option list, and a image positioned to the right of the list. This image needs to have the same height of the list, just like in the following image (in portuguese, but easily understandable).
I achieved this setting a fixed height and width on the image, but the list can grow up and isn't a good option adjust it manually.
Another solution is to insert a div containing the list and the image, and set the image size to 100%, but when I do this, the dropdown isn't achieved anymore (I think i'm breaking the structure that Bootstrap uses to toggle the dropdown, am I right?).
How can I achieve this solution?
<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav top-elements">
<li id="dropdown-produtos" class="dropdown">
Nossos Produtos<span class="caret top-caret"></span>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
<li class="dropdown-item-active">
texto1
<ul class="dropdown-menu img-dropdown">
<img src="assets/img.png">
</ul>
</li>
<li class="dropdown-item">
texto2
</li>
<li class="dropdown-item">texto3</li>
<li class="dropdown-item">texto4</li>
<li class="dropdown-item">texto5</li>
</ul>
</li>
</ul>
</div>
This should work:
<ul class="nav navbar-nav">
<li>Elemento 1</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
<ul class="dropdown-menu another-class">
<!-- ROW -->
<div class="col-md-12">
<!-- Column 1 -->
<div class="col-md-6">
<ul class="list-unstyled">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>
</div>
<!-- Column 2 -->
<div class="col-md-6">
<div class="drop-image">
<img src="./img/img.jpg" class="img-responsive" />
</div>
</div>
</div>
</ul>
</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Basically what I'm doing is create a div with a full width inside the dropdown element that comes as default in Boostrap. Inside this Full width row I create two columns with bootstrap col-md-6 class (you can do this with col-lg or col-sm or col-xs too) Inside this columns I add my content normally.
I created a class in the column 2 named "drop-image"; use this class to modify the img inside.
Hope it helps!
Btw, don't forget to style your dropdown (in the example I mark it with a class named another-class) so you define the position and width.
This might solve your problem, it's based off this plugin Yamm3!. See example Snippet.
Change this CSS rule if you need to make the dropdown wider because of the length of the link text. >
.list-unstyled, .list-unstyled ul {
min-width: 180px
}
body {
padding-top: 60px;
color: #666;
}
/* menu styes */
.list-unstyled,
.list-unstyled ul {
min-width: 180px
}
.list-unstyled > li {
padding-top: 10px;
}
.list-unstyled > li > a {
color: #555;
text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
background: #f5f5f5;
}
.yamm .yamm-content {
padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
#media (max-width: 767px) {
.yamm-content .list-unstyled > li img {
margin-top: -180px;
float: right;
}
}
<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" />
<div class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Grande Menu
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos Dois<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="alert alert-warning">Olá</div>
</div>

How do I align elements in bootstrap's nav bar?

I'm working with some custom bootstrap css for a collapsible navbar (https://github.com/IronSummitMedia/startbootstrap/tree/master/templates/grayscale). I tried adding a search bar up top, and I want the search bar to be in line with the icon, with the links underneath: 174.37.193.115/chrome/
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<i class="fa fa-bolt fa-lg"></i>
</a>
<div class="input-group col-lg-6 col-lg-offset-0">
<input type="text" class="form-control" placeholder="Look for people, groups, and anything">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
News
</li>
<li>
Profile
</li>
<li class="dropdown">
Something
<ul class="dropdown-menu">
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>
Bamn
</li>
<li>
Pewpew
</li>
<li>
Vroom
</li>
<li>
Wheeeew
</li>
<li>
Bzzzt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Unfortunately, I can't seem to get the search bar to go into the right place, and something really funky seems to be going on. In general, I'm also confused as to which elements can stack in line with each other (I can't seem to force it via col).
Any help in getting the search bar in line with the bolt, and links underneath would be appreciated! An explanation of how elements stack in line would be an added bonus!
To get the nav links under the above stuff:
.nav>li>a {
padding: 10px 30px 10px 0;
}
To make hoverstates look nicer, perhaps this is better:
.nav>li>a {
padding: 10px 0;
margin-right: 30px;
}
Or, if you just want to compensate for the padding offset, you can move the whole navbar to the left:
.navbar-nav {
margin-left: -15px;
}
To get the search bar inline with the logo:
.col-lg-6 {
margin-top: 12px;
}
Just add these rules to your own css file that you will call after the bootstrap ones. You might also to similar things for other responsive variations (or switch to percents).