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.
Related
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
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;
}
So my app has a primary menu and then once a user is logged in, a secondary menu. Works fine and looks fine with full size (first image shown). When my app hits its media queries as shown in code below, thats why things are getting messed up and despite my best efforts, I am having issues. Let me show images and then tell more of what is happening after.
So at full screen with user logged in, both menus show as:
But then when go to a tablet size of 768px in width, this is where the issues start. You can see that the drop down arrow not right for top menu, and secondary menu, no arrow at all. You can also see that the text that shows for the top menu has a bad z-index despite my updates and changes.
So my menu (outside of the angular injection for what shows) is mainly in the index.html for the top menu, then the secondary (as shown in the code) gets brought in via a partial.
<div class="navbar navbar-inverse" role="navigation" ng-controller="indexController" style="border-bottom: #ab2328 3px solid;">
<div class="container">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" ng-click="navbarExpanded = !navbarExpanded">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a ng-show="!isSWA" class="navbar-brand" href="http://www.naviabenefits.com" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
<a ng-show="isSWA" class="navbar-brand" href="http://pebb.naviabenefits.com/" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
</div>
<div class="collapse navbar-collapse" collapse="!navbarExpanded">
<!-- pebb main nav -->
<ul ng-show="isSWA" class="nav navbar-nav navbar-right" >
<li ng-show="authentication.isAdmin">admin</li>
<li>benefits we offer</li>
<li>enrollment</li>`
<li>forms</li>
<li>faq</li>
<li>IIAS merchant list</li>
<li>about us</li>
<li>contact us</li>
<li ng-show="authentication.isAuth"><a id="signOut" href="#/logout">log out <i class="fa fa-sign-out"></i></a></li>
</ul>
<ul ng-show="!isSWA" class="nav navbar-nav navbar-right">
<li ng-show="authentication.isAdmin">admin</li>
<li>products + services</li>
<li>about us</li>`
<li>testimonials</li>
<li>careers</li>
<li>news</li>
<li>blog</li>
<li>contact us</li>
<li ng-show="authentication.isAuth"><a id="signOut" href="#/logout">log out <i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="navbar navbarSecondary navbar-inverse" role="navigation" ng-controller="indexController" ng-show="authentication.isAuth">
<div class="container">
<div ng-include="'ppt/views/menu.html'">
</div>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
You can see in the div with the ng-include, I am calling the partial and that code is:
<div class="navbarSecondary collapse navbar-collapse" collapse="!navbarExpanded">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/pptHome">
Participants Home
</a>
</li>
<!-- secondary menu for SWA -->
<li class="dropdown" ng-show="isSWA">
<a href="http://pebb.naviabenefits.com/benefits/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Benefits We Offer
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="http://pebb.naviabenefits.com/benefits/health-care-fsa/" target="_blank" >
Medical Flexible Spending Arrangement
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/benefits/dependent-care-assistance-program/" target="_blank" >
Dependent Care Assistance Program
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/benefits/fsa-vs-hsa/" target="_blank" >
FSA vs. HSA Comparison
</a>
</li>
</ul>
</li>
<li class="dropdown" ng-show="!isSWA">
<a href="https://www.naviabenefits.com/participants/benefits/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Benefits & Info
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="https://www.naviabenefits.com/participants/benefits/health-care-fsa/" target="_blank" ng-show="hasMenuBenefit('HealthCare')">
Health Care FSA
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/day-care-fsa/" target="_blank" ng-show="hasMenuBenefit('DayCare')">
Day Care FSA
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/limited-health-care/" target="_blank" ng-show="hasMenuBenefit('Limited')">
Limited Health Care FSA
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/hsa/" target="_blank" ng-show="hasMenuBenefit('HSA')">
Health Savings Account (HSA)
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/gonavia-commuter-benefits/" target="_blank" ng-show="hasMenuBenefit('GoNavia')">
GoNavia Commuter Benefits
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/health-reimbursement-arrangement/" target="_blank" ng-show="hasMenuBenefit('HRA')">
Health Reimbursement Arrangement (HRA)
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/dental-reimbursement-plan/" target="_blank" ng-show="hasMenuBenefit('DirectReimb')">
Direct Reimbursement Plan
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/cobra/" target="_blank" ng-show="hasMenuBenefit('COBRA')">
COBRA
</a>
</li>
</ul>
</li>
<!-- secondary menu for SWA -->
<li class="dropdown" ng-show="isSWA">
<a href="http://pebb.naviabenefits.com/tools/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Tools & Resources
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="http://pebb.naviabenefits.com/benefits/expenses/" target="_blank">
Expenses
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/tools/navia-benefits-card/" target="_blank">
Navia Debit Card
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/tools/mynavia-mobile-app/" target="_blank">
MyNavia Mobile App
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/tools/tax-savings-calculator/" target="_blank">
Tax Savings Calculator
</a>
</li>
</ul>
</li>
<li class="dropdown" ng-show="!isSWA">
<a href="https://www.naviabenefits.com/participants/resources/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Tools & Resources
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="https://www.naviabenefits.com/participants/resources/expenses/" target="_blank">
Expenses
</a>
</li>
<li ng-show="hasMenuBenefit('BenefitCard')">
<a href="https://www.naviabenefits.com/participants/resources/benefits-card/" target="_blank">
Navia Benefits Debit Card
</a>
</li>
<li ng-show="hasMenuBenefit('MobileApp')">
<a href="https://www.naviabenefits.com/participants/resources/mynavia-app/" target="_blank">
MyNavia Mobile App
</a>
</li>
<li ng-show="hasMenuBenefit('FlexConnect')">
<a href="https://www.naviabenefits.com/participants/resources/flex-connect/" target="_blank">
FlexConnect
</a>
</li>
<li ng-show="hasMenuBenefit('OnlineClaim')">
<a href="https://www.naviabenefits.com/participants/resources/online-claim-submission/" target="_blank">
Online Claim Submission
</a>
</li>
<li ng-show="hasMenuBenefit('OnlineSubst')">
<a href="https://www.naviabenefits.com/participants/resources/online-debit-card-substantiation/" target="_blank">
Online Debit Card Substantiation
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/tax-savings-calculator/" target="_blank">
Tax Savings Calculator
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/tutorial-videos/" target="_blank">
Tutorial Videos
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/faq/" target="_blank">
FAQ
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/forms-documents/" target="_blank">
Forms & Documents
</a>
</li>
</ul>
</li>
</ul>
</div>
And finally, with my over rides to bootstrap for color, font, etc..., my CSS is as (took out the media breakpoints as none were working as expected):
.navbar {
background-color: #ffffff;
height: 60px;
color: #000000;
font-size: 15px;
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
border: none;
margin-bottom: 0px;
}
.navbarSecondary {
background-color: #ab2328;
height: 66px;
color: #000000;
padding-left: 0px;
}
.navbarSecondary > li.dropdown.open > ul {
background-color: #2dccd3;
color: #ffffff;
}
.navbar.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a:hover, .navbar.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a:active, .navbar.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a:focus {
background-color: #68070b;
}
.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a {
font-size: 20px;
padding: 20px 25px 20px 25px;
color: #ffffff;
}
#signOut {
padding: 6px 10px;
background-color: #ab2328;
color: #ffffff;
margin-top: 10px;
}
#signOut:hover, #signOut:active {
background-color: #68070b;
}
.sub-menu {
background-color: #2dccd3;
padding-top: 18px;
padding-bottom: 18px;
}
.sub-menu > li > a {
color: #ffffff;
font-size: 12px;
line-height: 15.6px;
padding: 8px 25px 8px 40px;
}
.sub-menu > li > a:hover {
background-color: #24a4a9;
color: #ffffff;
}
.navbar-inverse .navbar-nav > li >a {
color: #2d3130;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:active {
color: #ab2328;
}
I have tried asnd tried using chrome dev tools and setting media breakpoints to no avail to get this work. Am hoping some of you can chime and in give some help. Is much appreciated.
Can you help me with styling of last link in this ul.
#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a {
vertical-align: middle !important;
padding: 0 35px;
border-right: 1px #dadada solid;
}
<div id="DeltaTopNavigation" class="ms-core-navigation" role="navigation">
<div class=" noindex ms-core-listMenu-horizontalBox">
<ul class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/" accesskey="1"></a>
<ul class="static">
<li class="static selected">
<a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/AboutPGTU"></a>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Docs"></a>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Services"></a>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Ratings"></a>
</li>
</ul>
</li>
</ul>
</div>
I try to use
#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a:nth-last-child(1) {
border: 0 ;
}
but it's set border:0 to all links. How can i do this only for last one?
You will want to use last-child on the li instead of nth-last-child() on the a.
#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a {
vertical-align: middle !important;
padding: 0 35px;
border-right: 1px #dadada solid;
}
#DeltaTopNavigation ul.root.ms-core-listMenu-root.static li ul.static li:last-child a {
border: 0;
}
<div id="DeltaTopNavigation" class="ms-core-navigation" role="navigation">
<div class=" noindex ms-core-listMenu-horizontalBox">
<ul class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/" accesskey="1"></a>
<ul class="static">
<li class="static selected">
<a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/AboutPGTU"></a>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Docs"></a>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Services"></a>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Ratings"></a>
</li>
</ul>
</li>
</ul>
</div>
This should work:
#DeltaTopNavigation ul.root.ms-core-listMenu-root.static li:last-child a {
border: 0;
}
You need to add the :last-child to the li as currently its selecting the last a tag within all the li's. So setting it to the li will mean its selecting the a tag within the last li.
Here is a link for more info