RadhaKrishnaKiJaya
asked on
Drop Down Menu using CSS and HTML
Hello Experts,
Please look at the attachment. In Image-2, there is very little padding under Web Solutions. At the same time Padding-Top is more. I would like to make it like Services in Image-1. Thank you very much in advance.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #f2f2f2;
}
nav {
/*background: #1b1b1b;*/
background: white;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav .logo img {
margin-left: 0;
float: left;
background-color: white;
height: auto;
width: auto;
max-height: 80px;
max-width: 280px;
display: block;
border: thin;
}
nav .fas {
margin-right: 8px;
font-size: 1em;
}
nav ul {
float: right;
margin-right: 40px;
list-style: none;
position: relative;
padding-left: 5px;
}
nav ul li {
float: left;
display: inline-block;
/*background: #1b1b1b;*/
margin: 0 5px;
}
nav ul li a {
color: navy;
line-height: 70px;
text-decoration: none;
font-size: 15px;
padding: 4px 25px;
}
nav ul li a:hover {
/*color: cyan;*/
border-radius: 5px;
/*box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/
box-shadow: 0 0 5px navy, 0 0 10px navy;
}
nav ul ul {
background: #010437;
color: white;
width: auto !important;
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
border: thin solid;
}
nav ul ul ul {
border-top: none;
}
nav ul li:hover > ul {
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li {
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a {
color: white;
line-height: 40px;
text-decoration: none;
font-size: 15px;
padding: 0px 5px 15px;
}
nav ul ul li a:hover {
background-color: white;
width: 140px;
height: 30px;
display: inline-block;
border-radius: 4px;
/*box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/
box-shadow: 0 0 5px navy, 0 0 10px navy;
}
/*nav ul ul li a {
line-height: 50px;
}*/
nav ul ul ul li {
position: relative;
top: -60px;
left: 150px;
}
/*Bootstrap Style Menu Bar Margin*/
ul {
margin-top: 0;
margin-bottom: 0rem;
}
.show, .icon, input {
display: none;
}
.fa-plus {
font-size: 15px;
margin-left: 40px;
}
@media all and (max-width: 968px) {
nav ul {
margin-right: 0px;
float: left;
}
nav .logo {
padding-left: 30px;
width: 100%;
}
.show + a, ul {
display: none;
}
nav ul li, nav ul ul li {
display: block;
width: 100%;
}
nav ul li a:hover {
box-shadow: none;
}
.show {
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.show:hover {
color: cyan;
}
.icon {
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul {
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a {
padding-left: 40px;
}
nav ul ul ul a {
padding-left: 80px;
}
nav ul ul ul li {
position: static;
}
[id^=btn]:checked + ul {
display: block;
}
nav ul ul li {
border-bottom: 0px;
}
span.cancel:before {
content: '\f00d';
}
}
.content {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header {
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p {
font-size: 30px;
font-weight: 500;
}
ASKER
Hi lenamtl,
How can I put it in live link? Do you need the HTML source code?
Thank you?
How can I put it in live link? Do you need the HTML source code?
Thank you?
Hi just host it somewhere (whebhosting company) or you can create JS fiddle for free as long as you put your custom CSS and same Bootstrap version
https://jsfiddle.net/
And paste the link
https://jsfiddle.net/
And paste the link
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
you are welcome.
Please accept the solution to close the question.
you are welcome.
Please accept the solution to close the question.
Without a live link it's hard to guess..
When you have a case like this use the browser console.
Using Chrome, select the item with your cursor right click - inspect
Check the style box at the right it display the related class and you can edit the padding dirrectly in this box to make test.
When you find the correct value for the padding, note this and also check the related CSS file and line.
Then open the file with your text editor Notepad++ and adjust the class with the new value.
Note always make a backup of your file and you can comment the old value so this way you can revert back.
Open in new window
Check everywhere you have padding and do some tests.Ref https://www.w3schools.com/css/css_padding.asp
Open in new window
Note Menu is usually the most complicated partIf you are using a premium template contact the author because most of the time menu involve Javascript and it may have some CSS in JS.
As you are using Bootstrap you may need to adjust these value for other view.
So check the same class name in other media queries
Open in new window