I want the navbar lists that are placed on the right side, to be aligned below the header icon that is placed on the left side. One can toggle the navbar lists by creating a button to represent it, but I want it to simply expand under the header icon.
Also, I know that the disappearance is due to the navbar-expand-lg class. How should I approach fixing this? Is it possible by bootstrap? Or can it be fixed with HTML and CSS, as I don't want it to be done with javascript.
HTML
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">MADHUMITHA PRABAKARAN</a>
</div>
<!--
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
-->
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
background: #ffffff;
border-style: solid;
border-color: #cccccc;
border-width: 2px;
border-left-style: hidden;
border-right-style: hidden;
border-top-style: hidden;
top:0;
}
.navbar-brand {
background-color: #4aaaa5;
color: white;
font-size: 200%;
font-family: 'Times New Roman', Times, serif;
text-align: justify;
margin-top:-10px;
margin-bottom: -10px;
}
I guess you want to use your <a>your title</a>as toggle and keep it display in all sizes.
Then you just need to change class="navbar-brand" to class="navbar-brand d-block" to override the "display:none" of .navbar-brand in different sizes.
You might use following code snippet as a idea, which slightly alters from official documentation. Run it in full page and resize the window.
If you want to add any CSS styling. Try to do something like
<div class="navbar-brand newstyle">
then add .newstyle { something here } to your css stylesheet instead of modify the navbar-brand directly unless you pretty sure you are going to override the bootstrap css style for all navbar-brands in your website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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>
</head>
<body>
<nav class="navbar navbar-expand-sm">
<div class="container-fluid d-block">
<div class="row">
<div class="col-12">
<a class="navbar-brand navbar-toggler d-block" data-toggle="collapse" data-target="#collapsibleNavbar" href="#">Navbar</a>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="collapse show navbar-collapse" id="collapsibleNavbar" aria-expanded="true">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm re-creating the Apple website as homework for a class.
Here is the GitHub repository: Repository. I used Bootstrap in it to get that Apple feel. Later on, I see that the navigation is centered.
Unlike mine
A friend of mine told me something position: relative and left: 50%
Update 1:
He told me to add position: relative; left: 50%; transform: translateX(-50%) to the ul tag. I tried it but it didn't work.
Update 2:
Turns out I didn't have the CSS file linked.
I have fixed your issue, replace your html with my code and keep your Css original.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple</title>
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
</head>
<body>
<div class="Apple">
<nav class="navbar navbar-expand-lg navbar-light bg-dark d-flex justify-content-center">
<div class="d-flex">
<a class="navbar-brand" href="#"><img src="assets/img/apple.png" width="20"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#" style="color: white">Mac</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">iPad</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">iPhone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">Watch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white; text-align: center">Support</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://kit.fontawesome.com/35be2e4c40.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
hey I am not that good at CSS but try this in a style tag or CSS file hope this works
ul{
margin:0 auto;
}
this will center that 'ul' in the navbar. if you want more space between each element then try adding
li{
margin-left:<anyvalue>%;
}
use flexbox utilities, in line 19 <div class="collapse navbar-collapse" id="navbarNav"> add this class justify-content-center too, you can test other flexbox classes:
<div class="justify-content-start">...</div>
<div class="justify-content-end">...</div>
<div class="justify-content-center">...</div>
<div class="justify-content-between">...</div>
<div class="justify-content-around">...</div>
<div class="justify-content-evenly">...</div>
for more information check this link flexbox-bootstrap
I'm newbie. I tried to move nav to the right and logo must stay in left side.
I dont why I tried all ways. i am using bootstrap 4.7 and 4.7 nav bar code in html. I tried all code. e.g: ms-auto, ml-auto, justify-content-end in ul class, but still cann't success.
Help me to sort out this problem. Please check attached .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- custom css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<div class="container-fluid grey">
<div class="row">
<div class="container pink">
<div class="row">
<div class="head-top pt-2">
<div class="col-md-6 pt-5">
<div class="logo">
<img src="assets/images/logo.png" class="logo">
</div>
</div>
<div class="col-md-6 green">
<nav class="navbar navbar-expand-lg">
<!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo"></a> -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- <img src="assets/images/menu.png" class="menu-icon"> -->
</div>
<!-- head-top -->
</div>
</div>
<!-- container -->
</div>
</div>
<!-- container-fluid -->
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.logo{
width: 50px;
}
.menu-icon{
width: 30px;
}
.grey{
background-color: #8B8B8B;
}
.pink{
background-color: #EC8CBE;
}
.green{
background-color: #65D790;
}
It’s not clear what you were trying to do with the rows and columns for your navbar, so I started with a clean copy of Bootstrap’s 4.6.0 navbar.
If you want the menu items to be on the left, change the margin class on the unordered list from mr-auto to ml-auto.
And it’s best to put the active class on the list item, not the link.
.bg-pink {
background-color: #EC8CBE;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-pink">
<div class="container-lg">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/60x40.png" class="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I used a container-lg for the nav content so the logo and menu won't continue to spread out on larger screens.
As I understand it, you want the menu all the way to the right - next to the logo, but sticking to the right side? Right?
Well, I achieved this by putting the following css into the style.css file:
.pt-2 {
display: flex;
}
.navbar-expand-lg {
justify-content: flex-end;
}
The menu will be a bit above the height level of the logo, but you can play around with that if you want. Either raise the logo a little, or push down the menu.
If you wanna push down the menu using margin, i found that
margin-top: 42px;
was the right amount of pixels.
Hope it helped.
I did implement a responsive navigation bar using html css. the text is all responsive but i got the problem in the flag images in my navigation bar. It is not responsive. Can someone help? Thank you. I just want my flag images to be position before the navbar-toggler-icon and not after the navbar toggler icon. This is the code . Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Logo Nav - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='jquery.particleground.js'></script>
<script type='text/javascript' src='demo.js'></script>
<!-- Custom styles for this template -->
<style type="text/css">
.logo span {
height: 50%;
line-height: 50px;
float: left;
color: #fed136;
font-size:30px;font-weight:700;letter-spacing:0.1em;
font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
}
.logo {
line-height: 50px;
float: left;
color: #fff;
font-size:20px;
font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
font-weight:700;
letter-spacing:0.1em;
}
body {
padding-top: 54px;
}
#media (min-width: 992px) {
body {
padding-top: 56px;
}
}
#media (max-width: 578px){
.logo {
font-size: 10px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<div class="logo"><span>FASHION</span><br>CELEBRATE OUR FASHION</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
<a class="nav-link" href="#">INFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">STORE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CART</a>
</li>
</ul>
</div>
<div class="langswitch"><img class="flag-australia"src="australia.svg" width="30px;">
<img src="south-korea.svg" class="flag-korea"width="30px;">
</div>
</div>
</nav>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This is the output that i only get
Move your menu toggle to after the langswitch div.
<button class="navbar-toggler">
....
<div class="langswitch">
Copy the flags div and past it before the menu (don't forget to give it another class)
after that make one of them display:none (depending of the media queries screen width)
but you can also make the button after the flags div
I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
EDIT: I have fixed the issue. Turns out, the navbar was not really 100% width and did not reach the edges of the screen.
I'm currently struggling with a bootstrap 4 navbar. I had the same problem using the previous version. There are a lot of solutions online but they just don't seem to work in my case.
Default configuration:
With mx-auto:
I would like the Logo to stay where it is, the links are fine too but the "Login" link should be on the right edge of the screen. The closest I got to the desired effect was by using float-right. Even then, the link would end up like 150px from the right edge with no margins applied.
.navbar {
width:100%;
background: none !important;
#media(max-width:34em) {
background: black !important;
}
.navbar-toggler {
cursor:pointer;
outline:0;
}
.nav-link {
text-transform:uppercase;
font-weight:bold;
}
.nav-item {
padding: 0 1rem;
#media(max-width: 34em) {
padding: 0;
}
.nav-link {
#media(max-width: 34em) {
font-weight:normal;
color:#fff !important;
}
}
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="hero">
<div class="container">
<div class="row">
<nav class="navbar navbar-toggleable-md navbar-inverse">
LOGO
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK1</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK2</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK3</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK4</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link text-primary" href="#">LOGIN</a>
</li>
</ul>
</div>
</nav>
</div>
Well, with bootstrap, there's a navbar-right class. So on the part of the nav that you want to the right:
<ul class="nav navbar-nav mx-auto navbar-right">
<li class="nav-item">
<a class="nav-link text-primary" href="#">LOGIN</a>
</li>
</ul>
Also, bootstrap 4 is in Alpha, majority of people use bootstrap 3 which is represented above. I'm not entirely certain what mx-auto is(never heard of it). But I do know that navbar-right would put that one link on the right.