I'm trying to make my website responsive, but I'm having trouble getting my navigation to work correctly. I've tried adjusting the heights, but it's not aligning.
https://jsfiddle.net/ethacker/hcctkjok/2/
I would like the secondary menu (the one that appears when you hover over a parent menu list item) to be the same height as the "parent" menu (the one that says home, pregnancy, all about baby, etc). I use the PHP file extension, but have just pasted the "header" and "header2" code where it would be if it were all in the single file.
<body>
<header>
<nav>
<h1><a href="index.php"><img src="mommyinfologo.png"/></h1>
<ul class="navMenu">
<a href="index.php">
<li class="parentMenu">Home
<ul class="sub-menu">
<a href="mommymadness.php">
<li>This Mommy's Madness</li>
</a>
<a href="about.php">
<li>About Mommy Info</li>
</a>
<a href="contact.php">
<li>Contact Mommy Info</li>
</a>
</ul>
</li>
</a>
<a href="pregnancysplash.php">
<li class="parentMenu">Pregnancy
<ul class="sub-menu">
<a href="ttc.php">
<li>Trying To Conceive</li>
</a>
<a href="fetaldev.php">
<li>Fetal Development</li>
</a>
<a href="genderpredictions.php">
<li>Gender Predictions</li>
</a>
<a href="labordelivery.php">
<li>Labor and Delivery</li>
</a>
</ul>
</li>
</a>
<a href="aabsplash.php">
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<a href="advice.php">
<li>Advice</li>
</a>
<a href="guidelines.php">
<li>Guidelines</li>
</a>
<a href="milestones.php">
<li>Milestones</li>
</a>
<a href="learndev.php">
<li>Learning Development</li>
</a>
</ul>
</li>
</a>
<a href="healthsplash.php">
<li class="parentMenu">Health
<ul class="sub-menu">
<a href="pregnutrition.php">
<li>Pregnancy Nutrition</li>
</a>
<a href="breastfeeding.php">
<li>Breastfeeding</li>
</a>
<a href="formula.php">
<li>Formula Feeding</li>
</a>
<a href="toddlers.php">
<li>Toddler Nutrition</li>
</a>
<a href="preexercise.php">
<li>Prenatal Exercise</li>
</a>
<a href="postexercise.php">
<li>Postpartum Exercise</li>
</a>
<a href="organic.php">
<li>Organic DIY Health</li>
</a>
</ul>
</li>
</a>
<a href="partymommasplash.php">
<li class="parentMenu">Party Momma
<ul class="sub-menu">
<a href="pregann.php">
<li>Pregnancy Announcement</li>
</a>
<a href="genderreveal.php">
<li>Gender Reveal</li>
</a>
<a href="babyshower.php">
<li>Baby Shower</li>
</a>
<a href="birthann.php">
<li>Birth Announcement</li>
</a>
<a href="birthdays.php">
<li>Birthdays</li>
</a>
</ul>
</li>
</a>
<a href="stationssplash.php">
<li class="parentMenu">Stations
<ul class="sub-menu">
<a href="hospitalbag.php">
<li>Hospital Bag</li>
</a>
<a href="diaperbag.php">
<li>Diaper Bag</li>
</a>
<a href="changingstation.php">
<li>Changing Station</li>
</a>
<a href="babygear.php">
<li>Baby Gear</li>
</a>
</ul>
</li>
</a>
<a href="memorymarkerssplash.php">
<li class="parentMenu">Memory Markers
<ul class="sub-menu">
<a href="diymemories.php">
<li>Do It Yourself</li>
</a>
<a href="purchasable.php">
<li>Buy It</li>
</a>
</ul>
</li>
</a>
<a href="reviewsplash.php">
<li class="parentMenu">Reviews
<ul class="sub-menu">
<a href="games.php">
<li>Games</li>
</a>
<a href="gear.php">
<li>Gear</li>
</a>
<a href="learning.php">
<li>Learning</li>
</a>
</ul>
</li>
</a>
<a href="mommymadness.php">
<li class="parentMenu">Blog
</li>
</a>
</ul>
<?php include_once ("header2.php"); ?>
</nav>
</header>
<!-- Header2.php -->
<div id="handle">
<p>☰Menu</p>
<ul id="navSmall">
<li class="parentMenuSmall">Home
<ul class="sub-menu-small">
<a href="index.php">
<li>Home</li>
</a>
<a href="about.php">
<li>About</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
<a href="mommymadness.php">
<li>Mommy Madness</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Pregnancy
<ul class="sub-menu-small">
<a href="pregnancysplash.php">
<li>Pregnancy</li>
</a>
<a href="ttc.php">
<li>Trying to Conceive</li>
</a>
<a href="fetaldev.php">
<li>Fetal Development</li>
</a>
<a href="genderpredictions.php">
<li>Gender Predictions</li>
</a>
<a href="labordelivery.php">
<li>Labor and Delivery</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">All About Baby
<ul class="sub-menu-small">
<a href="aabsplash.php">
<li>All About Baby</li>
</a>
<a href="advice.php">
<li>Advice</li>
</a>
<a href="guidelines.php">
<li>Guidelines</li>
</a>
<a href="milestones.php">
<li>Milestones</li>
</a>
<a href="learndev.php">
<li>Learning Development</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Health
<ul class="sub-menu-small">
<a href="healthsplash.php">
<li>Health and Nutrition</li>
</a>
<a href="pregnutrition.php">
<li>Pregnancy Nutrition</li>
</a>
<a href="breastfeeding.php">
<li>Breastfeeding</li>
</a>
<a href="mommymadness.php">
<li>Formula Feeding</li>
</a>
<a href="toddlers.php">
<li>Toddler Nutrition</li>
</a>
<a href="preexercise.php">
<li>Prenatal Exercise</li>
</a>
<a href="postexercise.php">
<li>Postpartum Exercise</li>
</a>
<a href="organic.php">
<li>Organic DIY Health</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Party Momma
<ul class="sub-menu-small">
<a href="partymommasplash.php">
<li>Party Momma</li>
</a>
<a href="pregann.php">
<li>Pregnancy Announcement</li>
</a>
<a href="genderreveal.php">
<li>Gender Reveal</li>
</a>
<a href="babyshower.php">
<li>Baby Shower</li>
</a>
<a href="birthann.php">
<li>Birth Announcement</li>
</a>
<a href="birthdays.php">
<li>Birthdays</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Stations
<ul class="sub-menu-small">
<a href="stationssplash.php">
<li>Stations</li>
</a>
<a href="hospitalbag.php">
<li>Hospital Bag</li>
</a>
<a href="diaperbag.php">
<li>Diaper Bag</li>
</a>
<a href="changingstation.php">
<li>Changing Station</li>
</a>
<a href="babygear.php">
<li>Baby Gear</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Memory Markers
<ul class="sub-menu-small">
<a href="index.php">
<li>Memory Markers</li>
</a>
<a href="diymemories.php">
<li>Do It Yourself</li>
</a>
<a href="purchasable.php">
<li>Buy It</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Reviews
<ul class="sub-menu-small">
<a href="reviewsplash.php">
<li>Reviews</li>
</a>
<a href="games.php">
<li>Games</li>
</a>
<a href="gear.php">
<li>Gear</li>
</a>
<a href="learning.php">
<li>Learning</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Blog
<ul class="sub-menu-small">
<a href="mommymadness.php">
<li>This Mommy's Madness</li>
</a>
</ul>
</li>
</ul>
</div>
<section class="section" id="home">
<h2>Welcome to Mommy Info</h2>
<div>
Whether you've been there and done that, or you're coming in for your first stop, this is the site for you.
<p>
Visit the Pregnancy page to access all kinds of information relating to carrying your little one.
<br> Visit the All About Baby page to see all sorts of facts about how the baby is growing, advice about raising him or her, and how to encourage healthy development.
<br> Looking for help deciding how to feed your little one or how to stay fit, visit the Health page!
<br> Maybe you're looking for ideas to celebrate milestones in your baby's life, check out the Party Momma or Memory Markers tabs!
<br> Stressed about what to get for your baby? Visit the Stations or Reviews tabs!
<br> Finally, if you're just wanting to take a gander at the madness that is my life, visit my blog!
</p>
</div>
</section>
<aside class="section" id="about">
<h2>You're on the Home Page!</h2>
<ul class="nav">
<li>The Mommy Behind the Madness</li>
<li>About Mommy Info</li>
<li>Contact Mommy Info</li>
</ul>
<div class="hide" id="blogposts">
<h2>Recent Madness</h2>
<p>Five Months, and What Have I Done?!</p>
<p>Four Months, and What Do I Need?</p>
<p>Three Months, and Help! What's Happening!?</p>
<p>Two Months</p>
<p>It's Positive!</p>
</div>
</aside>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
</body>
CSS
body {
color:#ADD8E6;
background-image:url(backgroundarrows.png);
font-family:"Monotype Corsiva", sans-serif;
margin:0;
padding:0;
}
/* Global */
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color:#737597;
;
}
.section {
background-color:#fafbff;
border:thin solid #D3D3D3;
border-radius:10px;
box-shadow:lightgray 5px 5px 5px;
color:#696969;
display:inline;
float:left;
width:60%;
margin:0 1% 1%;
padding:5px 8px;
}
.section h2 {
border-bottom:solid medium #90cdd0;
color:#90cdd0;
text-align:center;
}
#about {
color:dimgrey;
float:right;
font-size:medium;
margin:1% 1% 0;
text-align:center;
width:33%;
}
.nav li {
text-align:left;
font-size:large;
padding:1%;
}
.nav a {
text-decoration:none;
color:darkgrey;
}
#home {
margin:1% 0 1% 1%;
}
#home div {
font-size:20px;
line-height:30px;
padding:1% 3%;
text-align:center;
}
#home div p{
font-family:"Times New Roman", serif;
font-size:20px;
line-height: 30px;
text-align:left;
}
.hide {
display: none;
}
/* Header */
header {
background-color:#cff1ff;
height:60px;
padding:5px 0;
}
header h1 {
color:#809dc6;
display:inline;
font-family:"Monotype Corsiva", sans-serif;
font-size:45px;
height:50px;
padding:5px 15px;
}
/*Website Navigation */
.navMenu {
display:inline;
font-size:20px;
}
.navMenu .parentMenu {
background-color:#cff1ff;
display:inline-block;
padding:5px 10px;
position:relative;
z-index:100000;
}
.navMenu .parentMenu:hover{
background-color:#bfd3ee;
}
.navMenu .parentMenu a{
color:#737597;
}
.navMenu .parentMenu:hover a:hover{
color:#87a2be;
}
.navMenu .parentMenu .sub-menu{
display:none;
left:0;
padding:0;
position:absolute;
top:33px;
width:180px;
z-index:10000;
}
.navMenu .parentMenu:hover .sub-menu{
display:block;
white-space:nowrap;
}
.navMenu .parentMenu:hover .sub-menu li{
background-color:#bfd3ee;
font-size:17px;
padding:10px;
text-align:left;
white-space:nowrap;
width:100%;
z-index:10000;
}
.navMenu .parentMenu .sub-menu li:hover{
background-color:#9ac9ed;
}
#handle{
font-size: 20px;
display: none;
color: #87a2be;
float: left;
width: 100%;
text-align: left;
}
#navSmall {
display: none;
text-align: center;
background-color: #cff1ff;
height: 100%;
}
#handle:hover #navSmall {
display: inline;
}
.sub-menu-small{
display: none;
background-color: #9ac9ed;
position: relative;
}
.sub-menu-small li {
border-bottom: solid thin #809dc6;
padding:1px 3px;
}
#navSmall .parentMenuSmall {
background-color: inherit;
text-align: left;
padding: 15px;
border-bottom: solid thin #809dc6;
font-size: 18px;
}
#navSmall .parentMenuSmall:hover .sub-menu-small {
display: inline-block;
margin-left: 100px;
position: absolute;
}
#construct {
width: 100%;
height: 100%;
margin-top: 100px;
border-radius: 20%;
}
/* Media Queries */
/*tablet*/
/*remove floats */
#media(max-width: 768px) {
body{
width: 100%;
}
header {
float: none;
text-align: center;
width: 100%;
height: 120px;
}
.section{
width: 95%;
}
#about{
display: none;
}
#handle{
display: block;
}
.navMenu {
display: none;
}
}
/* Tables on Diaper Bag*/
table {
width: 100%;
text-align: center;
}
table th {
font-size: 28px;
}
table td {
font-size: 15px;
font-family: "Comic Sans MS", sans-serif;
font-weight: bold;
}
#main {
color: #66CDAA;
}
#quick {
color: #809dc6;
}
#car {
color: #95b6c0;
}
#item, .item {
color: #9c9c9c;
}
.mainBag {
background-color: rgba(102, 205, 170, 0.1);
}
.toiletries {
background-color: rgba(128, 157, 198, 0.1);
}
.firstAid {
background-color: rgba(149, 182, 192, 0.1);
}
table td {
border: solid thin gray;
border-top:none;
border-right: none;
}
.right {
background-color: palegreen;
}
.wrong {
background-color: #ffc5b7;
}
.girl {
background-color: lightpink;
}
.boy {
background-color: lightblue;
}
.section p {
font-family: "Times New Roman", serif;
}
.items {
font-size: 20px;
font-family: "Times New Roman", serif;
color: #95b6c0;
}
.itemDesc{
font-size: 18px;
color: #6b6b6b;
}
Related
I'm creating a header that will be composed by different redirection links, and some of the cases will be some dropdown elements composed by several links that will be shown when clicking on the main link.
here si my html
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link-toggle" v-on:click="displayAnimalList = !displayAnimalList">PERSONAL FORM</a>
<ul class='dropdown-menu' v-show="!displayAnimalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayServiceList = !displayServiceList">SERVICES</a>
<ul class='dropdown-menu' v-show="!displayServiceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayContactList = !displayContactList">CONTACT</a>
<ul class='dropdown-menu' v-show="!displayContactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
and here mi css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}
I have it laid out as it should be, but the problem arises when I click on the drop-down menus, which pushes the rest of the elements of the header and unlays them. I have tried to introduce an absolute position to the elements that make up the header but it does not respect the original layout as shown in the following link
https://codepen.io/carlosurra/pen/YzqXjdP
Greetings and thanks in advance for your time and help
You should be able to fix that by adding position: relative; to the class .nav-items and position: absolute; to the class .dropdown-menu
here is the updated css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
position: relative;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
position: absolute;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
I am working on a responsive footer and I was able to get everything working. The layout is where there is a small issue. I am not able to get the bottom border after each li field and also not able to get the icon at the end. This is what I have done so far. Kindly let me know what I am missing.
#media all and (max-width: 979px) {
.brand-logos{
margin: 0 auto !important;
padding: 10px !important;
}
footer nav ul{
display:block !important;
margin: 0 auto !important;
}
footer nav ul li{
display:inline-block;
margin: 0 auto !important;
padding: 0 !important;
}
footer nav ul li img{
margin: 20px auto !important;
width: 70% !important;
display: block !important;
}
footer .footer-navigation .container-inline-css{
width: 100% !important;
padding:10px !important;
margin:0 !important;
border-bottom: 1px solid #77777A !important;
}
footer .footer-navigation .container-inline-css span{
margin: 0 !important;
padding: 0px !important;
cursor: pointer !important;
}
footer .footer-navigation div.container-inline-css ul{
max-height: 0 !important;
overflow: hidden !important;
padding: 0 20px !important;
}
footer .footer-navigation div.container-inline-css.active ul{
max-height: 10000px !important;
}
}
<div class="footer-navigation">
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CONTACT INFO</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="null" target="_blank">
<span class="icon-bg icon-phone"> </span>Call 1-800-STERLING</a>
</li>
<li><a href="/contact-us" target="_self">
<span class="icon-bg icon-contact"></span> Contact Us</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>OUR COMPANY</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="http://www.annsacks.com/" target="_blank">
About Us</a>
</li>
<li><a href="http://www.kallista.com/home.kls" target="_blank">
E-Newsletter Sign Up</a>
</li>
<li><a href="http://www.robern.com/home.rbn" target="_blank">
Careers</a>
</li>
<li><a href="/press-releases" target="_self">
Press Room</a>
</li>
<li><a href="http://www.kohler.com/corporate/index.html" target="_blank">
Kohler Co.</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>RESOURCES</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/litrature" target="_self">
Literature</a>
</li>
<li><a href="https://www.youtube.com/channel/UCMMnMReFTMuI9bpoctNGPkw/videos" target="_blank">
Merchandise</a>
</li>
<li><a href="null" target="_blank">
FAQs</a>
</li>
<li><a href="null" target="_blank">
Glossary</a>
</li>
<li><a href="null" target="_blank">
Tech Documents</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CUSTOMER CARE</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/cad-symbols" target="_self">
Track Your Order</a>
</li>
<li><a href="http://www.inspiracionkohler.com/" target="_blank">
Care & Cleaning</a>
</li>
<li><a href="null" target="_blank">
Warranties</a>
</li>
<li><a href="null" target="_blank">
Videos</a>
</li>
<li><a href="null" target="_blank">
Product Registration</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>SOCIAL</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="https://www.facebook.com/kohlermexico" target="_blank">
<span class="icon-bg icon-social-facebook"></span>Facebook</a>
</li>
<li><a href="https://www.instagram.com/kohlerco/?hl=en" target="_blank">
<span class="icon-bg icon-social-instagram"></span>Instagram</a>
</li>
<li><a href="https://www.youtube.com/user/kohler" target="_blank">
<span class="icon-bg icon-social-pinterest"></span>Pinterest</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-youtube "></span>YouTube</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-houzz"></span> Houzz</a>
</li>
</ul>
</div>
</div>
I have all the functionality in place, expect for the bottom border of the li elements and also the arrow icon at the end. Any help is appreciated.
1) You use the footer tag as your CSS selector, but there is no footer tag in your HTML code.
2) You haven't set any border to your li tags. You can accomplish that by adding to your css
.koh-nav-section-items li {
border-bottom: 1px solid #fff;
}
you should be able to add border to the bottom of each li element. If you want to exclude the last element you can add
.koh-nav-section-items:last-of-type {
border-bottom: none;
}
a tip: try to avoid using !important
note: If you can provide a codepen link to your app, it would be much easier
Hello Stackers,
I'm feeling very noobish right now, but I can't seem to get the right "drop down" underneath a button. When I hover over the Button "ONE", I only want the correct Dropdown menu showing up there. However, They all show up when hovering.
I can't really provide the HTML since it's using CONTAO Cms.
The CSS
#header nav.mod_navigation.main ul.level_2 li a:hover {
background-color:#f9f301;
color:#ffffff;
}
#header nav.mod_navigation.main ul.level_2 li a {
background:#ffffff !important;
color:#000000 !important;
width:100%;
border-radius:0px;
margin-right:0px !important;
}
#header nav.mod_navigation.main ul.level_2 li {
background-color:#ffffff !important;
color:#000000 !important;
width:100%;
border-bottom:1px dashed #000000;
border-radius:0px;
padding:0px;
}
#header nav.mod_navigation.main > ul:hover .level_2 {
display:block;
}
#header nav.mod_navigation.main ul.level_2 {
top:170px;
position:absolute;
overflow:visible;
display:none;
margin:0;
padding:0;
background-color:#fff;
z-index:1000;
max-width:170px;
}
HTML
For the HTML you can visit JSFiddle, since it's pretty long: https://jsfiddle.net/p9y21cee/
What am I doing wrong?
Change this:
#header nav.mod_navigation.main > ul:hover .level_2 {}
to:
#header nav.mod_navigation.main li:hover .level_2 {}
#header nav.mod_navigation.main ul.level_2 li a:hover {
background-color:#f9f301;
color:#ffffff;
}
#header nav.mod_navigation.main ul.level_2 li a {
background:#ffffff !important;
color:#000000 !important;
width:100%;
border-radius:0px;
margin-right:0px !important;
}
#header nav.mod_navigation.main ul.level_2 li {
background-color:#ffffff !important;
color:#000000 !important;
width:100%;
border-bottom:1px dashed #000000;
border-radius:0px;
padding:0px;
}
#header nav.mod_navigation.main li:hover .level_2 {
display:block;
}
#header nav.mod_navigation.main ul.level_2 {
top:170px;
position:absolute;
overflow:visible;
display:none;
margin:0;
padding:0;
background-color:#fff;
z-index:1000;
max-width:170px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header id="header">
<div class="inside">
<div class="kopfleiste">
<h1 class="logo"><a href=
""><img alt=
"" src=
""></a></h1>
</div>
<div class="open-close" id="btnmenu">
Menü
</div>
<div id="mobile-navi" style="display: none;">
<!-- indexer::stop -->
<nav class="mod_navigation block">
<a class="invisible" href=
"privat-gewerblich.html#skipNavigation15">Navigation
überspringen</a>
<ul class="level_1" role="menubar">
<li class="first">
<a class="first" href="home-17.html" role=
"menuitem" title="">Home</a>
</li>
<li>
<a href="elektrotechnik.html" role="menuitem"
title="Leistungen">Leistungen</a>
</li>
<li class="submenu trail">
<a aria-haspopup="true" class="submenu trail" href=
"industrieelektrik.html" role="menuitem" title=
"Referenzen">Referenzen</a>
<ul class="level_2" role="menu">
<li class="sibling first">
<a class="sibling first" href=
"industrieelektrik.html" role="menuitem"
title=
"Industrieelektrik">Industrieelektrik</a>
</li>
<li class="active"><span class="active" role=
"menuitem">Privat / Gewerblich</span></li>
<li class="sibling last">
<a class="sibling last" href=
"marktanschluesse.html" role="menuitem"
title="Marktanschlüsse">Marktanschlüsse</a>
</li>
</ul>
</li>
<li>
<a href="ueber-uns-20.html" role="menuitem" title=
"Über Uns">Über Uns</a>
</li>
<li>
<a href="downloads.html" role="menuitem" title=
"Downloads">Downloads</a>
</li>
<li>
<a href="21.html" role="menuitem" title=
"Kontakt">Kontakt</a>
</li>
<li class="last">
<a class="last" href="jobs-24.html" role="menuitem"
title="Jobs">Jobs</a>
</li>
</ul><a class="invisible" id="skipNavigation15"> </a>
</nav><!-- indexer::continue -->
</div><!-- indexer::stop -->
<nav class="mod_navigation main block">
<a class="invisible" href=
"privat-gewerblich.html#skipNavigation14">Navigation
überspringen</a>
<ul class="level_1" role="menubar">
<li class="first">
<a class="first" href="home-17.html" role="menuitem"
title="">Home</a>
</li>
<li class="submenu">
<a aria-haspopup="true" class="submenu" href=
"elektrotechnik.html" role="menuitem" title=
"Leistungen">Leistungen</a>
<ul class="level_2" role="menu">
<li class="first">
<a class="first" href="elektrotechnik.html"
role="menuitem" title=
"Elektrotechnik">Elektrotechnik</a>
</li>
<li>
<a href="industrieservice.html" role="menuitem"
title="Industrieservice">Industrieservice</a>
</li>
<li>
<a href="photovoltaik.html" role="menuitem"
title="Photovoltaik">Photovoltaik</a>
</li>
<li>
<a href="waermepumpen.html" role="menuitem"
title="Wärmepumpen">Wärmepumpen</a>
</li>
<li>
<a href="marktanschluesse-32.html" role=
"menuitem" title=
"Marktanschlüsse">Marktanschlüsse</a>
</li>
<li>
<a href="service.html" role="menuitem" title=
"Service">Service</a>
</li>
<li>
<a href="planungsbuero.html" role="menuitem"
title="Planungsbüro">Planungsbüro</a>
</li>
<li class="last">
<a class="last" href="vermietung.html" role=
"menuitem" title="Vermietung">Vermietung</a>
</li>
</ul>
</li>
<li class="submenu trail">
<a aria-haspopup="true" class="submenu trail" href=
"industrieelektrik.html" role="menuitem" title=
"Referenzen">Referenzen</a>
<ul class="level_2" role="menu">
<li class="sibling first">
<a class="sibling first" href=
"industrieelektrik.html" role="menuitem" title=
"Industrieelektrik">Industrieelektrik</a>
</li>
<li class="active"><span class="active" role=
"menuitem">Privat / Gewerblich</span></li>
<li class="sibling last">
<a class="sibling last" href=
"marktanschluesse.html" role="menuitem" title=
"Marktanschlüsse">Marktanschlüsse</a>
</li>
</ul>
</li>
<li>
<a href="ueber-uns-20.html" role="menuitem" title=
"Über Uns">Über Uns</a>
</li>
<li>
<a href="downloads.html" role="menuitem" title=
"Downloads">Downloads</a>
</li>
<li>
<a href="21.html" role="menuitem" title=
"Kontakt">Kontakt</a>
</li>
<li class="last">
<a class="last" href="jobs-24.html" role="menuitem"
title="Jobs">Jobs</a>
</li>
</ul><a class="invisible" id="skipNavigation14"> </a>
</nav><!-- indexer::continue -->
<div class="mod_article first last block" id="article-56">
<div class=
"mod_rocksolid_slider first last block rsts-main rsts-direction-x rsts-type-slide rsts-skin-light rsts-no-touch"
style="">
<div class="rsts-view" style="">
<div class="rsts-crop" style=
"width: 1000px; height: 440px; transform: translateZ(0px);">
<div class="rsts-slides" style=
"transform: translate3d(0px, 0px, 0px);">
<div class=
"rsts-slide rsts-slide-image rsts-active"
style="width: 1000px; transform: translate3d(0px, 0px, 0px); top: 0px;">
<div data-rsts-type="image"><img alt=""
height="440" src=
""
style=
"display: block; width: 1000px; height: 440px; min-width: 0px; min-height: 0px; max-width: none; max-height: none; margin-top: 0px; margin-left: 0px;"
width="1000"></div>
</div>
</div>
</div><a class="rsts-prev" href="" style=
"display: none;">prev</a><a class="rsts-next" href=""
style="display: none;">next</a>
</div>
</div>
<div id="shadow" style="clear:both;"><img src=
"files/Theessen/Basic/Shadow-Slider.png"></div>
<script>
(function($){var slider=$('.mod_rocksolid_slider').last();slider.find('video[data-rsts-background],[data-rsts-type=video]video').each(function(){this.player=false;});slider.rstSlider({"type":"slide","skin":"light","width":"css","height":"css","navType":"none","scaleMode":"fit","imagePosition":"center","random":false,"loop":false,"videoAutoplay":false,"autoplayProgress":true,"pauseAutoplayOnHover":false,"keyboard":true,"captions":true,"controls":true,"combineNavItems":true,"gapSize":"0%"});$(function(){if (!$.fn.colorbox){return;}var lightboxConfig={loop: false,rel: function(){return $(this).attr('data-lightbox');},maxWidth: '95%',maxHeight: '95%'};var update=function(links){links.colorbox(lightboxConfig);};slider.on('rsts-slidestop',function(event){update(slider.find('a[data-lightbox]'));});update(slider.find('a[data-lightbox]'));});})(jQuery);
</script>
</div>
</div>
</header>
</body>
</html>
What you had was: show level 2 when you hover the main ul, what you wanted is: show level 2 when an li inside the main ul is hovered.
i have a problem with a menu i am making, i want it to be something like:
<icon> <icon> <icon>
Title Longer Title
Title
now i have it like this:
<icon>
<icon> longer <icon>
Title Title Title
I made the menu using lists like this (Copy from actual code)
<ul>
<li>
<img src="images/buton1.png" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</li>
</ul>
and the css styles are like this
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
}
Thanks alot, if you have any questions please ask. Thank you.
li {
display: table-cell;
vertical-align: top;
width: 90px;
padding: 5px;
}
<ul>
<li>
<img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</li>
<li>
<img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile Into utile</h2>
</li>
</ul>
Your li are using display:inline-block
Add vertical-align:top to the li as the default there is baseline.
.meniufont {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: normal;
color: #434446;
}
.butonmeniu {
display: block;
}
li {
display: inline-block;
text-align: center;
margin: 0 10px;
vertical-align: top;
}
<div class="menu">
<ul>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20" class="butonmeniu">
<h2 class="meniufont">Title</h2>
</a>
</li>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20">
<h2 class="meniufont textjos">Longer <br>Title</h2>
</a>
</li>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20">
<h2 class="meniufont">Title</h2>
</a>
</li>
</ul>
</div>
Sup!
I toyed around with what I thought you were trying to achieve.
See this pen : Codepen Link
#nav { list-style : none;}
.nav-item {
display: inline-block;
width: 100px; /* Make it whatever you want */
}
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
margin: auto;
width: 100%;
}
<ul id="nav">
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
</ul>