I have this navbar where the listed items do not span the complete height of the navbar. Most of the posts I have seen have talked about padding and margin, but none of what I have should effect what is going on. Any tips would be great, thanks.
#navbar {
display: flex;
justify-content: flex-end;
width: 100%;
top: 0;
left: 0;
padding: 0;
position: fixed;
background-color: slategray;
}
#nav-list {
display: flex;
margin-right: 5rem;
list-style: none;
}
#nav-list a {
display: block;
padding: 1rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
border: 1px solid black;
}
#nav-list a:hover {
background: grey;
}
<nav id="navbar">
<ul id="nav-list">
<li><a>item1</a></li>
<li><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</nav>
EDIT: Thank you all for the fast answer, the margin was the problem and I swear I played with that and it changed nothing. I appreciate all the possible solutions that resolved this and teaching me the default behavior of ul margins!
Replace the margin-right rule in the #nav-list ruleset with a complete margin rule: margin: 0 5rem 0 0;. This will reset the browser's default styling and make it work as you wanted.
#navbar {
display: flex;
justify-content: flex-end;
width: 100%;
top: 0;
left: 0;
padding: 0;
position: fixed;
background-color: slategray;
}
#nav-list {
display: flex;
/*margin-right: 5rem; instead of this*/
margin: 0 5rem 0 0; /*use this*/
list-style: none;
}
#nav-list a {
display: block;
padding: 1rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
border: 1px solid black;
}
#nav-list a:hover {
background: grey;
}
<nav id="navbar">
<ul id="nav-list">
<li><a>item1</a></li>
<li><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</nav>
Now this will work...
#navbar {
display: flex;
justify-content: flex-end;
width: 100%;
top: 0;
left: 0;
padding: 0;
position: fixed;
background-color: slategray;
}
#nav-list {
margin: 0; /*added*/
display: flex;
margin-right: 5rem;
list-style: none;
}
#nav-list a {
display: block;
padding: 1rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
border: 1px solid black;
}
#nav-list a:hover {
background: grey;
}
<nav id="navbar">
<ul id="nav-list">
<li><a>item1</a></li>
<li><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</nav>
ul by default has margin-block-start: 1em and margin-block-end: 1em.
To fix this add margin: 0 to #nav-list.
#nav-list {
display:flex;
margin:0;
margin-right: 5rem;
list-style: none
}
If you are only concerned with height, just remove margin-top and margin-bottom from #nav-list.
Try this:
#nav-list {
display: flex;
list-style: none;
margin: 0 80px 0 16px;
}
Related
It is not too much of an issue but I wanted to know why there is still a space between the navbar's border and an element that is at the corner. This is my HTML and CSS code along with an image of the problem I am referring to. I have changed the margins but there is still space, I also tried putting the elements on the same line as the element but the space still exists.
IMPORTANT: THE MARGIN DISAPPEARS WHEN THE PAGE IS ZOOMED INTO
a {
display: block;
text-decoration: none;
text-align: center;
padding: 1em;
margin: 0;
}
a:hover {
background-color: green;
}
ul,
li {
display: inline-block;
padding: 0;
margin: 0;
}
ul {
display: flex;
max-width: 50%;
justify-content: space-around;
flex-grow: 1;
}
nav {
position: sticky;
top: 0;
width: 90%;
margin: 0;
padding: 0;
border-left: 5px solid black;
border-right: 5px solid black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: greenyellow;
}
<nav>
Home
<ul>
<li>
Products
</li>
<li>
Contact
</li>
<li>
About
</li>
</ul>
Sign Up
</nav>
It should not happen now, I have gave margin: 8px 0 which was just margin: 8px
body {
margin: 8px 0;
}
a {
display: block;
text-decoration: none;
text-align: center;
padding: 1em;
margin: 0;
}
a:hover {
background-color: green;
}
ul,
li {
display: inline-block;
padding: 0;
margin: 0;
}
ul {
display: flex;
max-width: 50%;
justify-content: space-around;
flex-grow: 1;
}
nav {
position: sticky;
top: 0;
width: 90%;
margin: 0;
padding: 0;
border-left: 5px solid black;
border-right: 5px solid black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: greenyellow;
}
<nav>
Home
<ul>
<li>
Products
</li>
<li>
Contact
</li>
<li>
About
</li>
</ul>
Sign Up
</nav>
I am trying to create a simple web page and I want the links' background covers the whole space in navbar but it covers only the text around it.
My code is here:
.navbar {
width: 105%;
height: 5vw;
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
Any suggestions?
You can remove the height from the navbar class so, it'll take the available height. Also, you can add height to .navbar li (Optional, if you want to use some custom height).
.navbar {
width: 105%;
/*height: 5vw;*/
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
/*height: 100%;(Optional)*/
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
i don't understand exact your problem but if your problem with the default margin and padding its a solution
* {
padding: 0;
margin: 0;
}
.navbar {
width: 105%;
height: 5vw;
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
/*height: 100%;(Optional)*/
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
I have removed some unnecessary style from your code & build this using CSS display: flex; instead of float. Now .tab is covering full height with background.
Here is the working example:
.navbar {
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.navbar li {
margin: 0;
padding: 0;
}
.navbar li a {
text-decoration: none;
color: black;
text-align: center;
padding: 10px;
display: block;
}
.tab {
background-color: grey;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I have this dropdown menu:
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<a>Raising in Captivity</a>
<ul id="dropdown">
<li><a>Temperature and Humidity</a></li>
<li><a>UVB</a></li>
<li><a>Diet</a></li>
</ul>
</li>
</ul>
</nav>
and the CSS for it:
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
position: relative;
line-height:15px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
and the JavaScript:
document.getElementById("menu").addEventListener("click", openMenu);
function openMenu() {
document.getElementById("dropdown").classList.toggle("active");
}
When you click on the Raising in Captivity link it opens the three dropdown options and it works, but they are positioned inside the navigation, I want them to show up just below the Raising in Captivity element , outside of the bottom border, how can I do that with css?
Here is a demo:
https://jsfiddle.net/philip9/farc0xmz/1/
#dropdown.active {
margin-top: 15px;
display: flex;
flex-direction: column;
position: absolute;
line-height:20px;
padding: 10px;
margin-left: -40px;
}
position: absolute. Then I think it looks nice with padding and margin-left added as well. Centers it under
You need to update the style for #dropdown.active. There are 2 position styles, remove position:releative and add some margin to move the drop-down below the lower border.
document.getElementById("menu").addEventListener("click", openMenu);
function openMenu() {
document.getElementById("dropdown").classList.toggle("active");
}
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height: 15px;
margin-top: 15px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<a>Raising in Captivity</a>
<ul id="dropdown">
<li><a>Temperature and Humidity</a></li>
<li><a>UVB</a></li>
<li><a>Diet</a></li>
</ul>
</li>
</ul>
</nav>
remove position: relative from #dropdown.active selector styles:
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height:15px;
}
Probably your problem is because you have both position: absolute; and position: relative; in the #dropdown.active CSS. Remove the position: relative; and adjust the margins.
Added/Updated these styles
#dropdown a {
padding: 0;
margin: 0;
}
#menu {
position: relative;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height: 15px;
left: 0;
text-align: left;
}
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#menu {
position: relative;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height: 15px;
left: 0;
text-align: left;
padding-top: 10px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
#dropdown a {
padding: 0;
margin: 0;
}
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<a>Raising in Captivity</a>
<ul id="dropdown">
<li><a>Temperature and Humidity</a></li>
<li><a>UVB</a></li>
<li><a>Diet</a></li>
</ul>
</li>
</ul>
</nav>
<script>
document.getElementById("menu").addEventListener("click", openMenu);
function openMenu() {
document.getElementById("dropdown").classList.toggle("active");
}
</script>
Your CSS code contains a duplicate entry for position property. So remove 'position: relative' from it. I added a margin-top of 25px to bring it below the bottom border.
You don't need to change the HTML and Javascript of your code. Change the CSS file as follows:
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
margin-top: 25px;
line-height:15px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
I tried to play all around the codes, but I didn't find a solution. Can anyone help me to center all content inside the border box?. I tried to search everywhere and I can't find the solution. Advance Thanks.
https://i.stack.imgur.com/f17JF.png
.menubar {
width: 50vw;
height: 5rem;
background-color: #283747;
margin: auto;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: relative;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
}
li.navbar {
list-style-type: none;
display: inline-block;
padding: .8rem 6rem 1rem 3rem;
text-transform: uppercase;
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
}
li.navbar a {
color: #000;
text-decoration: none;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
If you want to center the nav inside the .menubar container, give it these styles: display: flex; justify-content: center; align-items: center;. Then remove the default browser left padding on .mainMenu by giving it padding: 0.
.menubar {
width: 50vw;
height: 5rem;
background-color: #283747;
margin: auto;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
padding: 0;
}
li.navbar {
list-style-type: none;
display: inline-block;
text-transform: uppercase;
background: #fff;
border-radius: 1rem;
}
li.navbar a {
color: #000;
text-decoration: none;
display: inline-block;
padding: 1rem 3rem 1rem 3rem;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
Do You want this?
.menubar {
height: auto;
background-color: #283747;
margin: auto;
position: relative;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
vertical-align: middle;
}
li {
list-style-type: none;
display: inline-block;
padding: 1rem 4rem 1rem 3rem;
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
margin: 30px auto;
}
li.navbar a {
color: #000;
text-decoration: none;
text-transform: uppercase;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
jsfiddle