i'm working on this website and as you can see i've a vertical left navigation. How can i move the navigations link left-bottom (only on desktop) like this?
<header class="span3">
<div class="affix">
<div class="navbar span3">
<div class="navbar-inner">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<i class="icon-reorder"></i>
</a>
<a class="brand span2" href="index.html">
<img alt="" src="img/logo.png">
</a>
<nav class="nav-collapse collapse">
<ul class="nav">
<li class="nav-home active">Home</li>
<li class="nav-about">Philosophie</li>
<li class="nav-services">Menu</li>
<li class="nav-team">Team</li>
<li class="nav-reservation">Reservation und Öffnungszeiten</li>
<li class="nav-private">Private Dining</li>
<li class="nav-kontakt">Kontakt und Anreise</li>
</ul>
</nav>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<!-- <aside class="span3 text-center hidden-phone">
<ul class="social inline">
<li><a class="btn btn-small" href="#"><i class="icon-facebook"></i></a></li>
<li><a class="btn btn-small" href="#"><i class="icon-twitter"></i></a></li>
<li><a class="btn btn-small" href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</aside> -->
</div><!-- /affix -->
</header>
#media(min-width:1024px)
{
/* your style for desktop */
}
Related
I've got a basic nav-tabs in Twitter Bootstrap and I've got an image after all of my tabs, that I'd like to float right. I've tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->
<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">
What Bootstrap class or CSS should I write to make my image float to the right?
(Bootstrap 4 if that matters)
<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p>
</li>
<li class="list-inline-item">
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>
Put a div tag around the image and use d-flex justify-content-end like this:
<div class="row">
<div class="col-md-12">
<div class="">
<div class="">
<ul class="nav nav-pills w-100">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab"
aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="d-flex justify-content-end">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/09/f46bc1a6-9ffa-4434-a77a-ea1491d3597a-760x400.jpeg"
class="">
</div>
</div>
</div>
</div>
I tested this. Should work.
Another you can try:
<div class="col-md-12" style="border-top: 2px solid #000;">
<div class="mx-4">
<div class="footer pt-3">
<div class="row">
<div class="col-md-6">
<ul>
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff"
aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="float-right">
<img class="pull-right text-right float-right" src="http://placekitten.com/301/301" width="32px" height="32px">
</div>
</div>
</div>
</div>
</div>
</div>
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:1920px;
background-color:#eee;
height:50px;
}
footer{
background-color:grey;
}
#media screen and (min-width:320px){
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:100%;
}
}
#media screen and (min-width:985px){
#tog{
height:50px;
}
}
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt=" x">MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Employees</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<footer id="footer" role="contentinfo">
<div class="container-fluid">
<div class="row footer-list-row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="com">
<h3>Company</h3>
<ul>
<li>
<a href=''>About</a>
</li>
<li>
<a href=''>News</a>
</li>
<li>
<a href=''>Careers</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="sol">
<h3>Solutions</h3>
<ul>
<li>
<a href=''>Applications</a>
</li>
<li>
<a href=''>Planning</a>
</li>
<li>
<a href=''>Service</a>
</li>
<li>
<a href=''>Management</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="part">
<h3>Part</h3>
<ul>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="contact">
<h3>Contact Us</h3>
<ul>
<li>
<a href=''>Contact Us</a>
</li>
<li>
<a href=''>Addresses</a>
</li>
<li>
<a href=''>Feedback</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
I have implemented bootstrap 4 navigation bar inside my web application.Since it is little bit of tall than I expected I needed to customize its height in to 50px. Soon after I did the customization, mobile view stated to show a malicious behavior. when I try to expand the menu by clicking the "List Icon" it expands the list underneath of other DIV s like follow (Like when it has z index -1)
List View
This is the html code I used for navigation bar
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation" style="width:1920px; height:50px;">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt="Dispute Bills">ATTENDENCE MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">My Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Assigned Employees List</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report Bugs</a>
</li>
</ul>
</div>
</nav>
I have tried by changing the z-index. But it didn't work for me. any clue on this please
I am trying to integrate bootstrap tabs and dropdown menus using Bootstrap 2.3.4
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-no-collapse header-nav">
<ul class="nav pull-left nav-tabs">
<li class="dropdown">
<a href="/Home">
<i class="icon-bar-chart"></i></a>
</li>
<li class="dropdown"><i class="icon-refresh"></i>
</li>
<li>Development </li>
<li>Testing </li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane fade" id="dev">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dev</a>
<ul class="dropdown-menu">
<li>
Dev1
Dev2
Dev3
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade" id="testing">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Staging</a>
<ul class="dropdown-menu">
<li>
Staging 1
Staging 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
But its not showing the dropdown menu properly
The menu goes somewhere and puts a scroll inside it.
JSFIDDLE Demo
You can fix your problem with just adding a simple line of
.tab-content{
overflow:inherit !important;
}
see demo below
.tab-content{
overflow:inherit !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-no-collapse header-nav">
<ul class="nav pull-left nav-tabs">
<li class="dropdown"><a href="/Home">
<i class="icon-bar-chart"></i></a></li>
<li class="dropdown"><a href="javascript:RefreshAll();"
title="Refresh All"><i class="icon-refresh"></i></a>
</li>
<li>Development </li>
<li>Testing </li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane fade" id="dev">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
href="#">Dev</a>
<ul class="dropdown-menu">
<li>
Dev1
Dev2
Dev3
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade" id="testing">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
href="#">Staging</a>
<ul class="dropdown-menu">
<li>
Staging 1
Staging 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I'd like to make a header like this site or this site, I mean I want to put logo on left side and menu on right. But my header doesn't float well on here. I am confused now.
#header-right {
float: left;
}
#header-right {
float: right;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Header -->
<header id="header" class="header">
<div class="container" id="header-inner">
<div class="row">
<div id="header-left" class="clearfix">
<div id="logo" class="logo">
<a href="#">
<img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
</a>
</div> <!-- logo -->
</div> <!-- header-left -->
<div id="header-right">
<nav class="navbar navbar-default" id="">
<div class="navbar-header">
<a class="navbar-brand" href="#">Apple Juice</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<!-- Global Navigation -->
<div class="gnav collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown active-->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">order <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- nav navbar-nav -->
</div> <!-- gnav collapse navbar-collapse -->
</nav> <!-- navbar navbar-default -->
</div> <!-- header-right -->
</div> <!-- clearfix -->
</div> <!-- row -->
</div> <!-- container -->
</header>
</div> <!-- wrapper -->
Ah, I usually use clearfix in <div class="row"> or in <header> not in <div id="header-left">, but I wrote that in <div id="header-left">.
your css is wrong please replace one of properties as
#header-left {
float: left;
display: inline-block;
}
This will make sure your left block takes only area that it fits into.
You can use the .navbar-right class:
Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.
Please check the result. Is it what you want to achieve?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Right 1</li>
<li>Right 2</li>
<li>Right 3</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Update
I've used <ul class="nav navbar-nav navbar-right"> instead of <ul class="nav navbar-nav"> in your code:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Header -->
<header id="header" class="header">
<div class="container" id="header-inner">
<div class="row">
<div id="header-left" class="clearfix">
<div id="logo" class="logo">
<a href="#">
<img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
</a>
</div> <!-- logo -->
</div> <!-- header-left -->
<div id="header-right">
<nav class="navbar navbar-default" id="">
<div class="navbar-header">
<a class="navbar-brand" href="#">Apple Juice</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<!-- Global Navigation -->
<div class="gnav collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
<a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown active-->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">order <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- nav navbar-nav -->
</div> <!-- gnav collapse navbar-collapse -->
</nav> <!-- navbar navbar-default -->
</div> <!-- header-right -->
</div> <!-- clearfix -->
</div> <!-- row -->
</div> <!-- container -->
</header>
</div> <!-- wrapper -->
I have got a centered logo in my navbar and three menu categories on the side,when i reduce my resolution some categories start to disappear and when i reduce the resolution for navbar collapse things then get really messed up,the whole collapse menu is shown behind the main slider i have got.This is my code.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="active menu-item">
<a class="menu-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">About us</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/Night-club.png" title="Night-club logo" alt="Night-club logo">
</div>
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="menu-item">
<a class="menu-link" href="#">Gallery</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Reservation</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="main-slider-simple">
<ul class="img-slider">
<li>
<img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
</li>
</ul>
<!-- Glavni slider -->
</div>
And here is css for the menu links i have set up...
.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}
How can i accomplish normal responsivness?
Here is the jsfiddle that kinda explains my situation.
http://jsfiddle.net/cELuF/
I've changed the css for the div
.col-md-4
http://jsfiddle.net/cELuF/2/
You will be able to see what i've added in the CSS box.