I have a HTML and CSS menu and I wanna show the special icon for each item when users hover on each item. I will show you my menu and codes...
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
}
<body>
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
</body>
this is my html and css codes
Because you are using a background image, you can adjust it's position using background-position. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position.
You can adjust padding-left on .nav a to add space from the left edge and the nav text.
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 25px 14px 30px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
background-position: 4% 44%;
}
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
Related
I'm trying to replicate this dropdown list that is on this website (1st image). I've tried using a regular dropdown menu but it comes out very small and it is not centered on the page. How can I create multiple dropdowns in the center of the right side of my split screen? Any help will be greatly appreciated!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
</ul>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Select Your State
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">California</a></li>
<li><a class="dropdown-item" href="#">Illinois</a></li>
<li><a class="dropdown-item" href="#">Michigan</a></li>
<li><a class="dropdown-item" href="#">Ohio</a></li>
</ul>
</ul>
</div>
</div>
</body>
HTML has an <option> tag that is standardized selection inputs.
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
select {
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<select id="state">
<option disabled selected>Select Your State</option>
<option value="california">California</option>
<option value="illinois">Illinois</option>
<option value="michigan">Michigan</option>
<option value="ohio">Ohio</option>
</select>
</div>
</body>
And to get the selected value, check the value property of the <select> element, e.g.: document.getElementById("state").value;
Stylize your <select> element to specify width, margin, padding, etc, e.g.: select { width: 100%; }
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
I am trying to create a website using this codepen(enter link description here).
The problem I'm having is when I make the window size smaller, the profile section and main content section start to overlap. I think the codepen is using bootstrap grid system here so I don't really understand why this is happening.
content overlapping image
Here are the codes.
HTML
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bootstrap</a>
<div>
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="btn btn-primary my-2 my-sm-0" type="submit"><i class="fa fa-sign-out"></i> Log out</a>
</li>
</ul>
</div>
</div>
</nav>
<!--our content goes here-->
<div class="container content">
<div class="row profile">
<div class="col-md-3">
<div class="profile-sidebar position-fixed">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="https://media.rockstargames.com/chinatownwars/global/downloads/avatars/zhou_256x256.jpg" class="img-responsive" alt="">
</div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Jason Davis
</div>
<div class="profile-usertitle-job">
Developer
</div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR BUTTONS -->
<div class="profile-userbuttons">
<button type="button" class="btn btn-success btn-sm">Follow</button>
<button type="button" class="btn btn-danger btn-sm">Message</button>
</div>
<!-- END SIDEBAR BUTTONS -->
<!-- SIDEBAR MENU -->
<div class="profile-usermenu sidebar-sticky">
<ul class="nav flex-column">
<li class="active nav-item">
<a href="#" class="nav-link active">
<i class="fa fa-home"></i>
Overview </a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://codepen.io/jasondavis/pen/jVRwaG?editors=1000">
<i class="fa fa-user"></i>
Account Settings </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">
<i class="fa fa-check"></i>
Tasks </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
Some user related content goes here...
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9 ft">
<footer class="footer">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © Your Website 2018</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://github.com/ELMORABITYounes">
<i class="fa fa-github"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com/younes.elmorabit.92">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/younes-elmorabit-2a162310b/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
Privacy Policy
</li>
<li class="list-inline-item">
Terms of Use
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
background: #F1F3FA;
}
body {
overflow-x:hidden;
}
#mainNav {
background-color: darkslategrey;
color:white;
}
#mainNav .navbar-brand {
color: #fed136;
font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
footer {
text-align: center;
background-color: white;
}
.ft{
padding-left:22px;
padding-right:31px;
}
footer span.copyright {
font-size: 90%;
line-height: 40px;
text-transform: none;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color:blak;
}
footer ul.quicklinks {
font-size: 90%;
line-height: 40px;
margin-bottom: 0;
text-transform: none;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul.social-buttons {
margin-bottom: 0;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 40px;
display: block;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #212529;
}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
background-color: #fed136;
}
.content{
margin-top:60px;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
display:block;
margin:auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
.nav>li {
position: relative;
display: block;
}
Any help would be appreciated as I have tried multiple methods with no success.
Thank you in advance.
I see you have added a class position-fixed to the element with class profile-sidebar, so this element will remain fixed no matter what.
You could remove the class position-fixed and handle everything in the CSS, using media queries to set its position for smaller and larger screens.
<div class="profile-sidebar position-fixed">
The position-fixed does not allow your profile-sidebar to move away.
It works otherwise https://jsfiddle.net/f9hot4yk/
Instead of adding the position fixed class you can add profile-sidebar into a min-width location in your CSS where you add the fixed property to the sidebar.
Like this:
#media only screen and (min-width: 1200px) {
.profile-sidebar {
position: fixed;
}
}
I've seen some posts but, I can't figure it out on my specific lines of code. Can anyone help me add a | between 'About Us' and 'Login' I'm just trying to separate them using a '|'and I'm not exactly sure how to tweak my code to make that happen?
HTML
color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
<div id="logo">
<a href="/index.html">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" style="color:White;" >Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<li class="dropbtn">Services</li>
<div class="dropdown-content">
<a href="/carmaintenance" style="text-align:center">Car Maintenance
______________________
</a>
<a href="/gogreenseminars" style="text-align:center">Go Green Seminars
______________________
</a>
<a href="/microgridresources" style="text-align:center">Microgrid Resources
______________________
</a>
<a href="/gardeningtogether" style="text-align:center">Gardening Together
______________________
</a>
<a href="/volunteering" style="text-align:center">Volunteering and Activism
______________________
</a>
<a href="/recyclingefforts" style="text-align:center">Recycling Efforts
______________________
</a>
<a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe
</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
</ul>
</div>
</nav>
CSS
/* Position the navbar container inside the image */
/*.container {
position: absolute;
margin: 20px;
width: auto;
top:3%;
left:1%;
}
*/
/* The navbar */
.topnav {
overflow: hidden;
background-color: rgba(152,226,80,0.6);
}
/* Navbar links */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.nav-link
{
/*background-color:;*/
font-weight: bolder;
color: white;
font-size: 125%;
align-items:center;
text-align:center;
float: left;
display: block;
margin-left: 65px;
margin-right:5px;
}
.navbar {
float: left;
width:66%;
height:8%;
opacity:1;
border-radius:15px 0px 0px 15px;
padding-left: 0%;
top:3%;
left:1%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown Button */
.dropbtn {
background-color: rgba(152,226,80,0.0);
color: white;
padding: 8px;
font-size: 125%;
border: none;
font-weight:bolder;
margin-left:65px;
margin-right:5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 90px;
box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
z-index: 1;
text-align:center;
padding-left:20px;
padding-top:13px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color : rgba(152,226,80,0.6);
font-weight:bolder;
margin-top: -10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}
#font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight:bolder;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}
Any help would be nice and thank you in advance!
You can do this with either a border-left on the last li using :last-child a pseudo-element or a placed content using the :before pseduo-element. Note that by adding pseudo-elements - they are added as the first-child of the selected element. That may play a role in other styling issues.
EDIT - following my comment above - the only valid child of a ul is an li so you should amend your HTMLstructure to ensure that any divs / dropdowns etc are children of an li - not of the parent ul.
Thank you to #dale landry for the code skeleton used below :)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by using a :before pseudo element
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by simply adding aen element that is the same height as the entire li as a divider:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
And if you don't want to rely on the :last-child pseudo-selector - you can achieve the same by adding a class to the last item
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
And if you want the divider between every li - but not to the right of the last one then you can use the direct sibling combinator "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
or by using a :before pseudo element
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
Why dont you add span in your li element of About us like following:
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
</li>
Simply wrap a bar in a list item tag in line with your nav at the spot you wish to have one. See my snipit. Now it is semantically valid code
.flex-box {
display: flex;
}
li,
.nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 4px;
color: black;
}
.bar {
font-weight: bold;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<li class="dropbtn">Services</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="bar">|</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
I'm trying to make the links appear in the center and when I resize the page to show on mobile I want them to be placed next to each other.
Now there's 3 big blocks on top of each other on mobile. These have to be next to each other and smaller.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.container {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 32px 32px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<div class="navbar">
<div class="row">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</div>
</div>
In the code I provided you can see the code of the html page and de CSS. The images contain the view of the mobile version and how it looks on a normal browser on my laptop.
<div class="navbar">
<ul class="row">
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
</u>
</div>
First of all, your code is incorrect.
There is no nav and ul tag, and your class navbar is in the wrong place.
Your list should be:
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</ul>
</nav>
Next, you need to change styles in your responsive CSS.
.navbar-nav{
text-align: center;
}
.nav-link{
display: inline-block;
}
Here is the reference:
https://getbootstrap.com/docs/4.3/components/navbar/
Cheers.
I am trying to understand how to get this work. I have a navbar with logo on left and menu links on the right. When the screen reaches 768px, menu links should disappear and menu icon should show up instead. And when menu icon is pressed, menu overlay should appear with those links and some button and links.
My example below:
<nav class="navbar navbar-expand-md fixed-top navbar-dark" id="section1">
<div class="container">
<a class="navbar-brand" href="#"><img class="company-logo" src="img/company-logo.svg"></a>
<button class="navbar-toggler" type="button" data-target="#collapsingNavbarMd">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarMd">
<ul class="nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-us">Contact Us</a>
</li>
<section class="contact-buttons">
<div class="ask-button">
<button class="btn-outlined">Ask me</button>
</div>
<div class="social-icons">
<div class="whatsapp-icon social-icon">
<img src="img/whatsapp-icon.svg" alt="WhatsApp">
</div>
<div class="linkedin-icon social-icon">
<img src="img/linkedin-icon.svg" alt="LinkedIn">
</div>
<div class="facebook-icon social-icon">
<img src="img/facebook-icon.svg" alt="Facebook">
</div>
<div class="twitter-icon social-icon">
<img src="img/twitter-icon.svg" alt="Twitter">
</div>
</div>
</section>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
padding: 0;
.company-logo {
width: 140px;
height: auto;
}
.company-logo:hover {
opacity: 0.7;
}
}
.navbar .container {
margin-top: 30px;
}
.navbar .contact-buttons {
display: none;
}
.navbar button {
display: block;
}
.navbar-right .nav-item .nav-link {
padding: 0;
padding-left: 2.5rem;
color: #fff;
font-size: 1rem;
font-weight: 400;
}
.navbar-dark .navbar-toggler {
border-color: transparent;
z-index: 2;
}
.navbar-toggler {
padding: 0;
}
.navbar {
button:focus {
outline: none;
}
}
.navbar-expand-md .container {
padding-right: 30px;
padding-left: 30px;
}
.navbar-expand-md .navbar-collapse {
justify-content: flex-end;
}
Overlay style should be like this:
.navbar-overlay {
display: block;
background-color: #585858;
position: relative;
width: 100%;
text-align: center;
display: flex;
.container {
flex-direction: column;
padding: 12vh;
ul {
flex-direction: column;
}
}
.navbar-right .nav-item .nav-link {
padding: 0;
padding-left: 0;
color: #fff;
font-size: 3rem;
margin-bottom: 30px;
font-weight: 500;
}
.company-logo {
display: none;
}
.contact-buttons {
display: block;
}
}