I want to make a navbar and between my links I have a selectable space. How can I make it non selectable?
This is the code:
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navhome {
font-weight: 600;
color: rgba(255, 255, 255, 0.664);
}
.navlinks {
font-size: 15px;
}
.navlinks a {
font-weight: 570;
margin-top: -40px;
text-align: center;
padding: 15px 10px;
text-decoration: none;
float: right;
color: rgba(255, 255, 255, 0.863);
margin-left: -4px
}
.navlinks>.navlinks a:not(:last-child) {
margin-left: -10px;
}
<nav class="navbar">
<a class="navhome" id="noselect">home</a>
<div class="navlinks">
<li>testlink</li>
</div>
<div class="navlinks">
<li>testlink1</li>
</div>
</nav>
How can I make the space between links non selectable in html?
A simpler way to do this could be as follows.
Put all the links that you have in a div or header tag and make the display of the element flex so that everything inside the div or header tag get positioned in a line. I've used align-items CSS property to centre the links vertically as well. Then for each link declare a left margin or a right margin so that they don't stick to each other.
Note that I have initially set the default margin and padding of all the elements to 0px.
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
}
header {
display: flex;
align-items: center;
background-color: #0D0D0D;
padding: 10px;
}
.Header-Link {
font-family: "Poppins";
text-decoration: none;
color: #FFFFFF;
margin-right: 25px;
}
<html>
<body>
<header>
<a class="Header-Link" href="https://www.stackoverflow.com" target="_blank">Home</a>
<a class="Header-Link" href="https://www.stackoverflow.com" target="_blank">Test Link 1</a>
<a class="Header-Link" href="https://www.stackoverflow.com" target="_blank">Test Link 2</a>
</header>
</body>
</html>
Try this I made few changes in CSS classes and the format of code and syntax and exclude unnecessary CSS and make it the right way and the spaces between the links are non selectable by simply giving .nav-item a margin-right: 10px;
.navbar{
background-color: #303030;
}
.navbar-nav{
list-style: none;
display: inline-flex;
}
.nav-item{
margin-right: 10px;
}
.nav-item a{
text-decoration: none;
font-weight: normal;
text-align: center;
float: right;
color: #ffffffdc;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-item a.active{
font-weight: bold;
color: #daa520;
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" active>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">testlink</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">testlink1</a>
</li>
</ul>
</nav>
Related
I'm trying to give my self some extra space to work with at the bottom of the site by adding bottom-padding: 50px; to the body in CSS but for some reason it does not add anything. I've seen people do this to make the page to a scrollable length but for me it literally does nothing no matter what.
This is the code so far:
body {
margin: 0px;
padding-bottom: 500px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 25px;
}
.nav-item a {
font-family: poppins, arial;
text-decoration: none;
color: black;
}
.nav-item:first-child {
margin-right: auto;
font-size: 16px;
}
.project-button {
height: 40px;
width: 100px;
border: none;
border-radius: 20px;
background-color: #86c232;
}
.projects-link {
font-size: 16px;
}
<body>
<header>
<nav>
<ul class="nav-list">
<li class="nav-item">
<strong> Tiam Nazari </strong>
</li>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<button class="project-button">
<a class="projects-link" href="">Projects</a>
</button>
</li>
</ul>
</nav>
</header>
</body>
The padding is working, you just don't have any content. Height controls the actual height of the element (basically the distance from the outermost edges of the container) whereas padding controls the distance between the content and the edges.
If you want space, add a static height and then remove it once all of your content is in. If you still want white space vertically or horizontally once the content is in, then use padding.
body {
margin: 0px;
}
section.first {
height: 800px;
background-color: orange;
padding-top: 4em;
}
section:not(.first) {
background-color: pink;
height: 600px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 25px;
}
.nav-item a {
font-family: poppins, arial;
text-decoration: none;
color: black;
}
.nav-item:first-child {
margin-right: auto;
font-size: 16px;
}
.project-button {
height: 40px;
width: 100px;
border: none;
border-radius: 20px;
background-color: #86c232;
}
.projects-link {
font-size: 16px;
}
<body>
<header>
<nav>
<ul class="nav-list">
<li class="nav-item">
<strong> Tiam Nazari </strong>
</li>
<li class="nav-item">
Home
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<button class="project-button">
<a class="projects-link" href="">Projects</a>
</button>
</li>
</ul>
</nav>
</header>
<section class="first">section 1</section>
<section>section 2</section>
</body>
It is working for me. Use background-color: red; to see how the body grows. Make sure you're connecting the documents correctly.
I'm trying to add a logo to the navigation bar, but the logo I am trying to add is not displayed properly.
I've tried setting width and height, it stretches but it doesn't render properly, and the text written in the image is also not readable.
But when I use another different png image it is visible properly, for example when using this .png file https://www.logomakr.in/img/logo-design2.png, it is displayed properly and is visible.
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
#header {
background: #fff;
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}
#header.header-scrolled {
top: 0;
}
#header .logo {
font-size: 30px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5px;
font-family: "Poppins", sans-serif;
}
#header .logo a {
color: #2c4964;
}
#header .logo img {
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar>ul>li {
position: relative;
white-space: nowrap;
padding: 8px 0 8px 20px;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #2c4964;
white-space: nowrap;
transition: 0.3s;
border-bottom: 2px solid #fff;
padding: 5px 2px;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #1977cc;
border-color: #1977cc;
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<a class="logo me-auto" href="#">
<img src="https://toppng.com/uploads/preview/logo-design-concept-for-huebris-sample-logo-image-11563507273imdbiqdnjt.png">
</a>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#departments">Events</a></li>
<li><a class="nav-link scrollto" href="#departments">Contact Us</a></li>
<li><a class="nav-link scrollto" href="#doctors">Careers</a></li>
</ul>
</nav>
<!-- .navbar -->
</div>
</header>
<!-- End Header -->
What is causing this behavior? How to do it properly?
Just make the image rectangular, scale it decently and please erase that grey background so that it'll look good.
Then wrap that up using navbar-brand and img-fluid classe as shown here: https://getbootstrap.com/docs/5.1/components/navbar/#image
I have a menu bar that I am trying to float right, I also have a logo that I would like to keep to the left.
I have been able to get the menu to float to the right and keep the logo on the right however the menu is being pushed down in is not in line with the logo.
How do I get the menu in line with the logo?
If I put float left on the logo it leaves a weird gap at the top and messes up the layout.
Here is my code
.navbar-collapse ul a {
font-family: "Barlow", sans-serif;
color: white;
text-decoration: none;
vertical-align: top;
}
.navbar-collapse ul a:hover {
background-color: white;
color: #23303e;
border-radius: 50px;
text-transform: uppercase;
font-weight: 900;
font-family: "Fraunces", serif;
padding: 10px 30px 10px;
}
}
.navbar-collapse ul {
padding: 0;
margin: 0;
float: right;
display: flex;
}
.navbar-collapse li {
display: inline;
float: left;
}
.logo {
width: 20%;
margin: 0 auto;
padding: 7.5px 10px 7.5px 0;
}
}
<nav>
<div class="container-fluid">
<a class="nav-brand" href="#page-top"><img src="images/logo.svg" class="logo" alt="Sunnyside Logo"></a>
<button class="navbar-toggle" type="button">
<img src="images/icon-hamburger.svg" class="hamburger" alt="hamburger">
</button>
<div class="navbar-collapse">
<ul>
<li class="nav-link text-center">About</li>
<li class="nav-link text-center">Services</li>
<li class="nav-link text-center">Projects</li>
<li class="nav-link text-center">Contact</li>
</ul>
</div>
</div>
</nav>
You need to put display: flex for .container-fluid that helps all your menu items on the same line as logo. To align right for menu items, you should put margin-left: auto for .navbar-collapse
Here is the full code
.navbar-collapse ul a {
font-family: "Barlow", sans-serif;
color: white;
text-decoration: none;
vertical-align: top;
}
.container-fluid {
display: flex;
}
.navbar-collapse {
margin-left: auto;
}
.navbar-collapse ul a:hover {
background-color: white;
color: #23303e;
border-radius: 50px;
text-transform: uppercase;
font-weight: 900;
font-family: "Fraunces", serif;
padding: 10px 30px 10px;
}
}
.navbar-collapse ul {
padding: 0;
margin: 0;
float: right;
display: flex;
}
.navbar-collapse li {
display: inline;
float: left;
}
.logo {
width: 20%;
margin: 0 auto;
padding: 7.5px 10px 7.5px 0;
}
}
<nav>
<div class="container-fluid">
<a class="nav-brand" href="#page-top"><img src="images/logo.svg" class="logo" alt="Sunnyside Logo"></a>
<button class="navbar-toggle" type="button">
<img src="images/icon-hamburger.svg" class="hamburger" alt="hamburger">
</button>
<div class="navbar-collapse">
<ul>
<li class="nav-link text-center">About</li>
<li class="nav-link text-center">Services</li>
<li class="nav-link text-center">Projects</li>
<li class="nav-link text-center">Contact</li>
</ul>
</div>
</div>
</nav>
I tried creating three anchor tag elements and added some CSS to it. I was expecting all of them to be appearing in the same line but it doesn't work. Below is my code. What i need to do to make them appear in same line? I already tried inline, inline-block and float... didn't work.
.nav1 {
margin-left: 800px;
font-size: 20px;
font-family: cursive;
color: #fff;
}
.nav2 {
margin-left: 900px;
font-size: 20px;
font-family: cursive;
color: #fff;
}
.nav3 {
margin-left: 1000px;
font-size: 20px;
font-family: cursive;
color: #fff;
}
<div class="red">
<a class="nav1" href="#">Home</a>
<a class="nav2" href="#">Resume</a>
<a class="nav3" href="#">Contact</a>
</div>
Your <a> elements aren't inline as expected is because of the very large margins you're giving them, and that they are inline elements. For example, for .nav2, it will be 800px + nav1's width + 900px from the side of the viewport. However, since it is too wide, it will simply break into the next line.
What you want is to use a combination of flexbox and a fixed width for each element, since all your anchor elements should be 100px apart. The width of .red is set to 800px + (3 * 100px) just so the layout works:
.red {
display: flex;
width: 1100px;
}
.nav {
display: block;
font-size: 20px;
width: 100px;
}
.nav:first-child {
margin-left: 800px;
}
<div class="red">
<a class="nav" href="#">Home</a>
<a class="nav" href="#">Resume</a>
<a class="nav" href="#">Contact</a>
</div>
Scroll right to view links, as you have given them a large left margin.
Add display: flex to .red container and remove the margins:
.red {
display: flex;
}
use the property display:flex as below
.red{
display:flex;
}
<div class="red">
<a class="nav1" href="#">Home </a>
<a class="nav2" href="#">Resume </a>
<a class="nav3" href="#">Contact</a>
</div>
here is a sample snippet. the issue is the margins. and you don't need to use separate classes if you only need links to be inline.
.red a {
display: inline;
margin-right: 20px;
color: #0d0;
font-size: 20px;
font-family: cursive;
}
is enough I think.you can play with following snippet and check.
.red {
display: flex;
}
.nav1 {
/*margin-left: 800px;*/
font-size: 20px;
font-family: cursive;
color: #0d0;
}
.nav2 {
/*margin-left: 900px;*/
font-size: 20px;
font-family: cursive;
color: #0d0;
}
.nav3 {
/*margin-left: 1000px;*/
font-size: 20px;
font-family: cursive;
color: #0d0;
}
.red a {
display: inline;
margin-right: 20px;
color: #0d0;
font-size: 20px;
font-family: cursive;
}
<div class="red">
<a class="nav1" href="#">Home</a>
<a class="nav2" href="#">Resume</a>
<a class="nav3" href="#">Contact</a>
</div>
Firstly, Change color ( you are given #fff ) of every link (nav1 ,nav2 ,nav3 ).
Then, Add width as max-content to red div.
.red{
width:max-content;
}
more info about max-content: https://css-tricks.com/almanac/properties/w/width/#max-content
Also add inline-block each link.
.nav1 {
margin-left: 800px;
font-size: 20px;
font-family: cursive;
color: #111;
display:inline-block;
}
.nav2 {
margin-left: 900px;
font-size: 20px;
font-family: cursive;
color: #111;
display:inline-block;
}
.nav3 {
margin-left: 1000px;
font-size: 20px;
font-family: cursive;
color: #111;
display:inline-block;
}
.red{
width:max-content;
}
<div class="red">
<a class="nav1" href="#">Home</a>
<a class="nav2" href="#">Resume</a>
<a class="nav3" href="#">Contact</a>
</div>
you are link color #fff that is white nothing to be seen. Go to right ---->
This must work.
I'm new here, so this is my first question. Might be a little bit stupid, but I cannot solve this problem. I created a nav bar, but it's not centered at all:
So, as you can see, where it says "galeria", clearly it'sn not at the center of the navbar. This is my code and the css for this navbar. Thank you in advance! :D
<ul class="nav">
<li><a class="link" href="/">concerts</a></li>
<li><a class="link" href="/about/">discografia</a></li>
<li><a class="link" href="/work/">galeria</a></li>
<li><a class="link" href="/clients/">botiga</a></li>
<li><a class="link" href="/contact/">contacte</a></li>
</ul>
And this is my css style sheet for the navbar:
.nav{
list-style:none;
margin:10px;
padding:150px;
text-align:center;}
.nav li{
display:inline-block;}
.nav a{
text-decoration: none;
color: #b8d2db;
color: #fff;
width: 150px;
display: inline-block;
padding: 15px;
font-size: 30px;
transition: 0.4s;
font-family: 'Montserrat Alternates', sans-serif;}
.link:hover {
color: #fcff90;}
It is centered it just doesn't look like it because the words are variable in length and you have nothing visually identifying boundaries.
To demonstrate:
.nav {
list-style: none;
margin: 10px;
padding: 150px;
text-align: center;
}
.nav li {
display: inline-block;
border: 1px solid white;
}
.nav a {
text-decoration: none;
color: #b8d2db;
color: #fff;
width: 150px;
display: inline-block;
padding: 15px;
font-size: 30px;
transition: 0.4s;
font-family: 'Montserrat Alternates', sans-serif;
}
.link:hover {
color: #fcff90;
}
body {
background-color: black;
}
<ul class="nav">
<li><a class="link" href="/">concerts</a></li>
<li><a class="link" href="/about/">discografia</a></li>
<li><a class="link" href="/work/">galeria</a></li>
<li><a class="link" href="/clients/">botiga</a></li>
<li><a class="link" href="/contact/">contacte</a></li>
</ul>
One way around this is to remove the explicit width property you set on the <a>
.nav {
list-style: none;
margin: 10px;
padding: 150px;
text-align: center;
}
.nav li {
display: inline-block;
}
.nav a {
text-decoration: none;
color: #b8d2db;
color: #fff;
display: inline-block;
padding: 15px;
font-size: 30px;
transition: 0.4s;
font-family: 'Montserrat Alternates', sans-serif;
}
.link:hover {
color: #fcff90;
}
body {
background-color: black;
}
<ul class="nav">
<li><a class="link" href="/">concerts</a></li>
<li><a class="link" href="/about/">discografia</a></li>
<li><a class="link" href="/work/">galeria</a></li>
<li><a class="link" href="/clients/">botiga</a></li>
<li><a class="link" href="/contact/">contacte</a></li>
</ul>