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
Related
I have been coding a website and found that a link I need to be responsively stuck to the bottom of my div (In that spot both on large screen & mobile view)
Below is the code I currently have & 2 pictures attached for both big screen and mobile.
nav#navbar {
background-color: rgba(0, 0, 0, 0.8) !important;
}
nav#navbar ul.navbar-nav {
display: flex;
margin: 0 auto;
}
div#image-container {
height: 1920px;
background-repeat: no-repeat;
}
#booksy-container {
/* CSS properties and values go here */
height: 10.5%;
position: absolute;
top: 60%;
width: 100%;
text-align: center;
}
#booksy-link {
display: fixed;
position: relative;
align-content: end;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap test</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="index.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.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navigation bar-->
<nav
class="navbar navbar-expand-md bg-dark navbar-dark navbar-fixed-top transparent"
id="navbar"
>
<a class="navbar-brand" href="index.html">
<img src="images/BlankBack.png" width="80" height="60" alt="" />
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-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 active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<div
class="container-fluid"
id="image-container"
style="
background-image: url('images/Charlie-Co.-Barbershop-West-Chester-3.png');
"
>
<div class="d-flex justify-content-center pb-0" id="booksy-container">
<a
href="https://booksy.com/en-ie/3715_charlies-barbers-lucan_barbers_52867_ireland"
id="booksy-link"
>Book your appointment here!</a
>
</div>
</div>
</body>
</html>
Any suggestions welcome! Thank you!
I need the code to reflect what the view on a large screen is to the mobile view
I am trying to align my brand logo correctly for small devices, as it happens in the official website of bootstrap.
For this, I am running the following:
#media (max-width: 992px) {
.navbar-brand {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>Company</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top pb-3">
<div class="container-lg">
<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>
<a class="navbar-brand justify-content-center" href="#">
<img
src="https://img.icons8.com/color/480/firebase.png"
alt="Company"
width="40"
height="40"
/>
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav navbar-nav-scroll">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Careers</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
But as you can see, the logo is not fixed. I mean, it moves up and down when pressing the toggler button. How can I solve it?
Also, if you notice, the height of the .navbar in small screens is different from the original one... which css rule can I apply to solve this too?
I have thought about doing:
.navbar {
min-height: 60px;
}
but I think this is not really professional. Any ideas?
Removing what you have already added for.nav-brand, I believe, one of the below might work better.
#media (max-width: 992px) {
.navbar-brand {
width: 100px;
margin: auto !important;
}
}
#media (max-width: 992px) {
.navbar-brand {
margin-right: 48vw !important;
}
}
I was designing a bootstrap navbar with a YouTube logo. Instead of aligning to right it is awkwardly placed in center. It seems the width of anchor is more than the size of image as result the image is pushed to right. How can I move it to right.
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
.yt-img-a{
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
enter image description here
Instead of setting the image width to 6%, use a px value such as 30px.
.yt-img{
width: 30px;
position: relative;
}
Demo
The ms-auto class makes your ul to be placed on the right side.
<ul class="navbar-nav ms-auto"> // ms-auto removed
Codepen Link: https://codepen.io/emmeiWhite/pen/JjRMxQw
Have fixed that and also added flex-grow:1 where ever needed :)
Full Code:
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item flex-grow-1">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt="Image Here"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
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>
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.