Add padding without moving the element - html

When I hover on an padded element it moves a bit how can I make it stable
<nav>
<ul id="nav-ul">
<li >Profile</li>
<li >Home</li>
<li >Friends</li>
<li >Notifications</li>
</ul>
</nav>
And this is the css code
nav ul li {
float: right;
list-style: none;
padding: 15px;
padding-left: 40px;
}
.nav-item{
color: #fff;
text-decoration: none;
}
.nav-item:hover {
background-color: #2c3e50;
padding: 5px;
}


Just remove the padding: 5px; from your css:
.nav-item {
padding: 5px;
}
.nav-item:hover {
background-color: #2c3e50;
}
<nav>
<ul id="nav-ul">
<li >Profile</li>
<li >Home</li>
<li >Friends</li>
<li >Notifications</li>
</ul>
</nav>


You can add padding to it before without hover
.nav-item {
padding: 5px;
}
.nav-item:hover {
background-color: #2c3e50;
}
<nav>
<ul id="nav-ul">
<li >Profile</li>
<li >Home</li>
<li >Friends</li>
<li >Notifications</li>
</ul>
</nav>


thanks guys i figure it out you just need to add padding to both of them
.nav-item{
color: #fff;
text-decoration: none;
padding: 5px;
}
.nav-item:hover {
background-color: #2c3e50;
padding: 5px;
}

Related

Navbar not working like on the other subpages

I got a website where I have a couple of subsites. All connected with a navbar. This navbar is styled with CSS and connected with a class to an unordered list. As I'm adding a new Subpage and want to add the CSS to the navbar, it makes the background of it really tall.
I tried to create an additional class for this "special navbar" and copied and pasted the CSS code of the original class in the new "special class". After I did this I tested it but the CSS code didn't even do anything. If anyone could help me I would flutter.
Thanks in advance.
.nav {
list-style-type: none;
margin: 0;
padding: 40;
overflow: hidden;
background-color: #333;
}
.li {
float: left;
}
.a {
display: block;
text-align: center;
padding: 14px 16px;
color: white;
}
#active {
background-color: lightskyblue;
color: black;
}
a:link {
text-decoration: none;
}
a:hover {
background-color: #111;
color: white;
}
a {
color: black;
}
<ul class="nav">
<li class="li">Home </li>
<li class="li">Stundenplan SJ 22/23</li>
<li class="li"> über mich </li>
<li class="li"> Meine Lieblingsseiten</li>
<li class="li"> Taschenrechner</li>
<li class="li" style="float:right"> Beispielseite Herr Stocki </li>
</ul>

never use float unless you absolutely have to. Use flexbox for your nav
.nav {
display:flex;
list-style-type: none;
margin: 0;
padding: 40;
overflow: hidden;
background-color: #333;
}
.a {
display: block;
text-align: center;
padding: 14px 16px;
color: white;
}
#active {
background-color: lightskyblue;
color: black;
}
a:link {
text-decoration: none;
}
a:hover {
background-color: #111;
color: white;
}
a {
color: black;
}
<ul class="nav">
<li class="li">Home </li>
<li class="li">Stundenplan SJ 22/23</li>
<li class="li"> über mich </li>
<li class="li"> Meine Lieblingsseiten</li>
<li class="li"> Taschenrechner</li>
<li class="li" style="float:right"> Beispielseite Herr Stocki </li>
</ul>

How to get rid of right margin in last item of navigation bar using last child

I have created a navigation bar and have added margin-right to all the items.
However, when I try to get rid of the margin right in the last child of the navigation item "contact", it won't disappear.
.navbar {
text-decoration: none;
margin-bottom: 150px;
}
.nav-item {
display: inline-block;
text-decoration: none;
}
.nav-list {
text-align: center;
}
.nav-list li a {
text-decoration: none;
margin-right: 100px;
}
.nav-list ul li a:last-child {
margin-right: 0;
}
.nav-list li a:active {
color: #000;
}
.nav-list li a:visited {
color: #000;
}
<div>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Work</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
Here is my code pen: https://codepen.io/derrickogole/pen/rNxbaaK
Is there a way to do this without adding an additional class to contact?

Use the :last-child psuedo-class.
.nav-item:last-child a {
margin: 0;
}
See it here:
.navbar {
text-decoration: none;
margin-bottom: 150px;
}
.nav-item {
display: inline-block;
text-decoration: none;
}
.nav-list {
text-align: center;
}
.nav-list li a {
text-decoration: none;
margin-right: 100px;
}
.nav-list ul li a:last-child {
margin-right: 0;
}
.nav-list li a:active {
color: #000;
}
.nav-list li a:visited {
color: #000;
}
.nav-item:last-child a {
margin: 0;
}
<div>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Work</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
Additionally, your markup was invalid due to closing </li> before </a>. a is nested in li so it needs to be closed first.

How to remove sub-menu border from the menu list

I want to remove the border that I have under the sub menu -"View All clients", "Add New Clients". any help would be really appreciated. The picture is attached here has the menu and sub-menu that I want to remove the border https://i.stack.imgur.com/GKLgZ.png
.help-left-menu {
list-style: none;
margin-top: 36px;
padding-left: 18px;
overflow: auto;
}
.help-left-menu li {
padding: 5px 8px;
border-bottom: 1px solid #CCC;
background: rgba(119, 140, 162, 1);
text-decoration: none;
}
.help-left-menu li {
list-style: none;
}
#dropdown-items {
display: none;
padding-left: 2px;
}
#dropdown-items a {
color: white;
}
.menu {
color: white;
}
.dropdown-list li a.active {
background: darkslategray;
border: 1px solid darkgray;
padding: 10px;
}
.tab-content {
display: none
}
.config-left {
margin-top: 36px;
}
.content-heading {
background-color: rgba(119, 140, 162, 1);
padding-top: 5px;
padding-bottom: 1px;
color: white;
align-content: center;
text-align: center;
}
.features {
padding-top: 4px;
padding-bottom: 10px;
color: white;
padding-left: 0px;
margin-left: 20px;
}
<ul class="help-left-menu">
<li class="dropdown-list">
<div class="features">
<h5>FEATURES</h5>
</div>
<a href="#" data-toggle="dashboard-content" class="dashboard menu
tab">DASHBOARD<i class="dropdown-icon"></i></a>
</li>
<li class="dropdown-list"><a href="#" data-toggle="new-proposal-
content" class="newProposal menu tab">NEW PROPOSAL<i class="dropdown-
icon"></i></a></li>
<li class="dropdown-list">PROPOSALS<i class="dropdown-icon"></i>
</li>
<li class="dropdown-list"><a href="#" data-toggle="client-
content" class="clients menu">CLIENTS<i class="dropdown-icon"></i>
<ul class="submenu" id="dropdown-items">
<li><a href="#" data-toggle="view-all-client-content"
class="view-allClients submenu tab">View All Clients</a>
</li>
<li><a href="#" data-toggle="add-new-client-content" class="add-
newClient submenu tab">Add New Clients</a>
</li>
</ul>

Use something like this:
.help-left-menu li {
border-bottom: 1px solid #CCC;
}
.submenu li {
border: 0;
}
.submenu a {
font-size: 40px;
color: red;
text-decoration: none;
}
<ul class="help-left-menu">
<li class="dropdown-list">
<div class="features">
<h5>FEATURES</h5>
</div>
<a href="#" data-toggle="dashboard-content" class="dashboard menu
tab">DASHBOARD<i class="dropdown-icon"></i></a>
</li>
<li class="dropdown-list"><a href="#" data-toggle="new-proposal-
content" class="newProposal menu tab">NEW PROPOSAL<i class="dropdown-
icon"></i></a></li>
<li class="dropdown-list">PROPOSALS<i class="dropdown-icon"></i>
</li>
<li class="dropdown-list"><a href="#" data-toggle="client-
content" class="clients menu">CLIENTS<i class="dropdown-icon"></i>
<ul class="submenu" id="dropdown-items">
<li><a href="#" data-toggle="view-all-client-content"
class="view-allClients submenu tab">View All Clients</a>
</li>
<li><a href="#" data-toggle="add-new-client-content" class="add-
newClient submenu tab">Add New Clients</a>
</li>
</ul>

If you have used border: none in your CSS selector, make sure to try adding !important or adding a higher specificity to it in case anything has higher specificity than it.

My dropdown menu in my nav bar isn't aligning

I'm having trouble aligning my drop down menu in my nav bar, I've tried every suggestion out there. I've tried left, float: left, right, and pretty much everything else. I think it is possibly something interfering. The drop down menu has everything aligned from center to right of the parent menu item.
https://jsfiddle.net/ethacker/j7tgq95j/3/
My html code:
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul>
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<!--
Gender Predictions:
Old Wive's Tale
Boy vs Girl- The Ramzi Method
-->
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<!--
Birthdays - Link to 1-10th bdays.
-->
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<!--
Drop Down Menu:
DIY
Purchases
(Both to have holiday/event selectors on right of page)
-->
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
My css code:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
position: absolute;
list-style-type: none;
margin:0;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home{
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}

This will align the submenu to the left:
.navMenu .parentMenu .sub-menu {
display: none;
position:absolute;
list-style-type: none;
padding:0;
margin: 0;
left:-1px;
top:27px;
}
.navMenu .parentMenu:hover .sub-menu {
display: block;
}
https://jsfiddle.net/am13qur4/

you did not specify where you want to align your drop down elements. Do you want to align all to the right, center or left. I assumed left so try adding the code below. You may need to adjust the left attribute's value and your hover background styling too.
.sub-menu a{
position: absolute;
left: 3%;
}
Let me know if this helps. Stay warm!

Navigation looks wrong when it's fixed

I want the position of my navigation to be fixed. But when I change the position to "fixed" in nav, it looks very weird.
Here are two examples:
Without fixed position: https://jsfiddle.net/Timowo/3nrvch3c/
<nav>
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
With fixed position: https://jsfiddle.net/Timowo/5aock5k1/
<nav style="position: fixed;">
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
What do I have to change so it's inline but also fixed?
Thanks!

With position:fixed the element will collapse to the width of the widest descendant..in the absence of a defined width.
Just set width:100%
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
background-color: red;
}
nav {
transition: all 0.2s ease-in-out;
position: fixed;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
nav ul li.logo {
padding: 14px;
float: left;
}
nav ul li.logotext {
font-family: Futura;
color: white;
font-size: 1.3em;
padding: 28px;
text-shadow: 3px 3px black;
}
nav ul li.category a {
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 1.2em;
float: right;
font-family: Futura;
text-shadow: 3px 3px black;
}
nav ul li.category:hover a {
background-color: #212121;
}
nav ul li.active a {
background-color: #212121;
}
<nav>
<ul>
<li class="category">Contact
</li>
<li class="category">Work
</li>
<li class="category active">Home
</li>
<li class="logotext">Logo</li>
</ul>
</nav>