I have a doubt relating to the dropdown in a navbar. For the normal nav-link (no dropdown) I put the menu text inside an H3, but when I tried to do the same for the dropdown-link, the arrow is not next to the title but under it. I decided to replace the h3 with a span and give the same CSS as an h3, this time the arrow was on the right place, but all the other styles were not taken into account.
The third example is the one more close to what I want, but the font-size is not quite the same.
Original code without dropdown
html {
font-size: 16px;
}
body {
font-family: Arial;
font-size: 1rem;
}
#logo {
max-height: 2.5rem;
}
.nav_container {
margin-bottom: 10%;
}
h1,h2,h3,h4,h5,h6 {
margin-bottom: .25rem;
margin-top: .25rem;
}
h3 {
font-size: 1.25rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Original</title>
<!-- Bootstrap 3.0-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap 4.0-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- FontAwesome5 Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Fin liens CSS et Script -->
</head>
<body>
<div class="nav_container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="d-flex align-items-center">
<a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-uppercase" href="index.php">
<h3 class="font-weight-bold">Home</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link1</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link2</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link3</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link4</h3>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
My tries
html {
font-size: 16px;
}
body {
font-family: Arial;
font-size: 1rem;
}
#logo {
max-height: 2.5rem;
}
.nav_container {
margin-bottom: 10%;
}
#navbardrop {
font-size: 1.25rem;
}
#navbardrop2 {
font-size: 1.25rem;
}
#navbardrop3 {
font-size: 1.25rem;
margin-bottom: .25rem;
margin-top: .25rem;
}
#admin_menu {
font-weight: 700!important;
margin-bottom: .25rem;
margin-top: .25rem;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: .25rem;
margin-top: .25rem;
}
h3 {
font-size: 1.25rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<!-- Bootstrap 3.0-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap 4.0-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- FontAwesome5 Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- CSS-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Fin liens CSS et Script -->
</head>
<body>
<h2>Try 1</h2>
<div class="nav_container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="d-flex align-items-center">
<a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-uppercase" href="index.php">
<h3 class="font-weight-bold">Home</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link 1</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link2</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link3</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link4</h3>
</a>
</li>
<!-- Admin -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
<h3 id="admin_menu">Admin</h3>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<h4>Admin1</h4>
</a>
<a class="dropdown-item" href="#">
<h4>Admin2</h4>
</a>
</div>
</li>
</ul>
</nav>
</div>
<h2>Try 2</h2>
<div class="nav_container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="d-flex align-items-center">
<a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-uppercase" href="index.php">
<h3 class="font-weight-bold">Home</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link 1</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link2</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link3</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link4</h3>
</a>
</li>
<!-- Admin -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown"><span id="admin_menu">Admin</span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<h4>Admin1</h4>
</a>
<a class="dropdown-item" href="#">
<h4>Admin2</h4>
</a>
</div>
</li>
</ul>
</nav>
</div>
<h2>Try 3</h2>
<div class="nav_container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="d-flex align-items-center">
<a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-uppercase" href="index.php">
<h3 class="font-weight-bold">Home</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link 1</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link2</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link3</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<h3 class="font-weight-bold">Link4</h3>
</a>
</li>
<!-- Admin -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="navbardrop3" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<h4>Admin1</h4>
</a>
<a class="dropdown-item" href="#">
<h4>Admin2</h4>
</a>
</div>
</li>
</ul>
</nav>
</div>
</body>
</html>
give position:relative to h3 and position:absolute to :after and adjust it accordingly. thanks
Workaround
CSS
#navbardrop{
font-size: 1.25rem;
}
#admin_menu {
font-weight: 700!important;
margin-bottom: .25rem;
margin-top: .25rem;
}
h3{
font-size: 1.25rem;
}
.dropdown-toggle::after{
display: none;
}
h4{
font-size: 1rem;
}
HTML
<div class="nav_container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="d-flex align-items-center">
<a class="navbar-brand" href="homepage"><img id="logo" src="images/logo.jpg"></a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-uppercase" href="index.php"><h3 class="font-weight-bold">Accueil</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" href="add_mat.php"><h3 class="font-weight-bold">Ajout Matériel</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" href="add_cat.php"><h3 class="font-weight-bold">Ajout Catégorie</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" href="add_type.php"><h3 class="font-weight-bold">Ajout Type</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" href="add_model.php"><h3 class="font-weight-bold">Ajout Modèle</h3></a>
</li>
<!-- Admin -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
<h3 id="admin_menu">Admin <span class="fas fa-angle-down"></span></h3>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../update_data.php"><h4>Update Data</h4></a>
<a class="dropdown-item" href="../bd_tables.php"><h4>Tableaux BD</h4></a>
</div>
</li>
</ul>
</nav>
</div>
Result
Related
I have tried making responsive navbar using Bootstrap 5, but my navbar-brand gives me problems. Letters overflow over other elements and my toggle-icon goes to new row and it should be in right corner in the same row as navbar header.
Here is codepen:
https://codepen.io/namename123/pen/VwQzRPL
.logo-iddeea {
font-family: 'Agency FB', sans-serif;
font-size: 3.5rem;
background-image: linear-gradient(to left,rgb(254, 168,100), rgb(240,104,69));
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.logo-image{
height:100px;
width:100px;
}
.portal-open-data{
font-size:1.3rem;
margin-top:-5%;
}
.nav-link {
color: #2c3474;
font-weight:bold;
}
.blue-color-font {
color: lightblue;
}
#media only screen and (max-width: 700px) {
.logo-slika{
width:80px;
height: 80px;
}
.logo-iddeea{
font-size:2.5rem;
}
.portal-otvorenih-podataka{
font-size:0.8rem;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="http://fonts.cdnfonts.com/css/agency-fb" rel="stylesheet">
<nav class="navbar navbar-expand-sm navbar-dark container-fluid bg-dark offset-0">
<div class="container-fluid">
<a class="navbar-brand " href="#">
<div class="row">
<div class="col-3"> <img src="https://shoutcart.com/uploads/gig/bd6f3a23cd5294a2370b09bc413f3331.png" alt="" class="d-inline-block logo-image"></div>
<div class="col-9">
<div class="row">
<div class="col-md-5 ps-4 ps-md-1 my-md-auto logo-iddeea">
AABBA
</div>
<div class="col-md-7 ps-sm-1 ps-4 blue-color-font my-md-auto portal-open-data ">
SOME COMPANY <div style="margin-top:-3%;"> TEXT</div>
</div>
</div>
</div>
</div>
</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse ms-5">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link blue-color-font">Groups</a>
</li>
<li class="nav-item dropdown ">
Passwords
</li>
<li class="nav-item">
<a class="nav-link blue-color-font">Administrators</a>
</li>
<li class="nav-item ">
<a class="nav-link blue-color-font">Users</a>
</li>
<li class="nav-item ">
<a class="nav-link blue-color-font">Documentation</a>
</li>
<li class="nav-item ">
<a class="nav-link blue-color-font">Activity logs</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown card shadow">
Logged Username
<div class="dropdown-menu dropdown-menu-end orange-border">
Reports
Settings
<div class="dropdown-divider blue-color-font"></div>
<a>Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a><img src="https://shoutcart.com/uploads/gig/bd6f3a23cd5294a2370b09bc413f3331.png" alt="" class="mx-2 img-responsive logo-image"></a>
<a class="navbar-brand logo-iddeea" href="#"><h1>AABBA</h1></a>
<span class="text-info"> SOME COMPANY TEXT</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Groups</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">User</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Administrators</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Activity logs</a>
</li>
</ul>
<form class="d-flex" role="search">
<button class="btn btn-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>
use this code and remove all styles which are not required
I have 2 menus on the web page one needs to show at the center bottom and another one on the top right. This following code shows all of them in the same line.
Here is the layout I am trying to achieve.
**********************************************************************************
Home About User Login
Logo Heading
Link1 Link2 Link3 Link4 Link5
**********************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
You're super close! An mx-auto and mt-auto on the bottom-center menu and an mb-auto on the top-right menu are all you need to get it working.
NOTE: This does break on smaller screens as we're still treating everything as columns and columns do wrap. But, you could absolutely position the top-right menu if you need to on smaller screens.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav>li>a {
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png">Heading
</a>
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" ID="link1" runat="server">
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server">
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server">
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server">
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mb-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="LogOnUser" runat="server"></asp:Label>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help you.
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
.bottom_menu{
margin-top: 30px;
}
.top_menu{
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded justify-content-md-center">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="bottom_menu navbar-nav ml-auto text-md-center">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="top_menu navbar-nav ml-auto justify-content-md-center justify-content-start flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
You mean Like This?
<style>
#header{
position: relative;
width: 100%;
height: 100px;
background-color: orange;
}
a{
display: inline-block;
width: 50px;
}
#logo, #navigation, #url{
position: absolute;
}
#logo{
top: calc(50%);
}
#navigation{
top: 0;
right: 0;
}
#url{
left: calc(50% - 125px);
bottom: 0;
}
</style>
<div id = "header">
<div id = "logo">
LOGO
</div>
<div id = "navigation">
<a>Home</a>
<a>About</a>
<a>User</a>
</div>
<div id = "url">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>
</div>
</div>
Hi i am trying to add some separator between nav-link but it does not work
i tried to add
nav-link:after {
content:"|";
}
but it is not working or it shows in the left side.
here is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-color">
<div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="navbar-brand" href="#">
<img src="logo.png" />
</a>
</li>
</ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
<ul class="navbar-nav ml-auto">
<div class="nav-item nav-link mr-md-2">
<div> some test some test</div>
</div>
<div class="nav-item nav-link mr-md-2">
<div> some test</div>
</div>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> X </span>
</a>
</li>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> V </span>
</a>
</li>
</ul>
</div>
</nav>
You forgot . before class in css .nav-link and set position: absolute; to position it...
See fiddle:https://jsfiddle.net/3ah58br4/7/
body{background-color:black!important;}
.nav-link:after {
content: "|";
position: absolute;
top: 16px;
margin-left: -10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-color">
<div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="navbar-brand" href="#">
<img src="logo.png" />
</a>
</li>
</ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
<ul class="navbar-nav ml-auto">
<div class="nav-item nav-link mr-md-2">
<div> some test some test</div>
</div>
<div class="nav-item nav-link mr-md-2">
<div> some test</div>
</div>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> X </span>
</a>
</li>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> V </span>
</a>
</li>
</ul>
</div>
</nav>
I have a couple of issues with Bootstrap 4 fixed-top navbar:
1) It scrolls the page behind it when in collapsed view - How to prevent that?
2) You can't scroll the navbar down if the links are out of the view, as you can see in the example below, I have 8 links, and added 35px paddings just to make them go out of the view. You cannot scroll down to them. Instead it scrolls the page behind it.
.navbar-nav > li > a {
padding:35px!important;
}
p {
padding-top:1000px; /* to emulate scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
<span>Logo</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 1</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 2</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 3</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 4</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 5</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 6</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 7</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 8</a>
</li>
</ul>
</div>
</div>
</nav>
<p class="text-center"><strong>I am content at the bottom</strong></p>
This issue you can solve it by 2 ways
you can define a height for the .navbar class for example it can be 80px and then the content behind it give it padding-top: 80px or margin-top: 80px with the same value or even more to have some more space
UPDATE
just add breakpoint #media screen and (max-width: 991px) { .navbar { height: auto } }
body { height: 2000px; }
.navbar {
height: 80px;
}
#media screen and (max-width: 991px) { .navbar { height: auto } }
p {
padding-top:85px; /* to emulate scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
<span>Logo</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 1</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 2</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 3</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 4</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 5</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 6</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 7</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 8</a>
</li>
</ul>
</div>
</div>
</nav>
<p class="spacing text-center"><strong>I am content at the bottom</strong></p>
this is more dynamic way if you don't want to have a fixed height and you can define it with js like that you just get the height of the header and then give it as padding-top to the content you want
var navH = $('.navbar').outerHeight();
console.log(navH);
var res = $('.spacing').css('padding-top', navH + 10); /* 10 in case you want more space*/
console.log(res);
I need a simple schema like this in picture:
This is a try: http://plnkr.co/edit/6v6C4PZCGfvH9FavNai0?p=preview without success.
How to accomplish this?
I need what is in picture. Exactly.
In xs mode I disable many things. My problem is in desktop mode.
<div class="container-fluid" style="background:red">
<div class="row">
<div class="d-inline-block" style="background-color:blue">
<div class="container">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="d-inline-block" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
There's no much sense develop in bootstrap without grid/colmuns orientantion. You can set a fixed width for you inner element "user box".
Try this code
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background:red">
<div class="row">
<div class="container">
<div class="col-md-9 col-lg-9">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3 col-lg-3" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
</body>
</html>