Sub-Menu Not Showing (Appearing Under Header) - wordpress

Project: lightertaste.com
The top menu has sub-menus under About, Nutrition & Fitness, and Resources, but it is not appearing correctly. Seems to be hidden under the menu.
Hoping someone can help me correct. Thanks!
<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><div id="top-navigation">
<table><tr><td>
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>About</li>
<li>Philosophy</li>
<li>FAQ</li>
<li>Work With Me</li>
<li>Contact</li>
</ul>
</li>
<li>
Recipe Index
</li>
<li>
Nutrition & Fitness
<ul>
<li>Meal Plans</li>
<li>Meal Prep</li>
<li>Workouts</li>
</ul>
</li>
<li>
Resources
<ul>
<li>Start a Blog</li>
<li>My Blogroll</li>
<li>Thank Yous</li>
</ul>
</li>
<li>
Shop
</li>
</ul>
</nav>
</td><td>
<form class="search-top-form" method="get" action="http://www.lightertaste.com/">
<input class="search-top-input" type="text" name="s" id="s" value="" placeholder="Search" />
<input class="search-top-submit" type="submit" name="submit" id="searchsubmit" value=" " />
</form>
</td></tr></table>
</div>
<div class="top-subscribe-social">
<span class="social-top">
<a target="_blank" class="icon-rss top-social" href="#"></a>
<a target="_blank" class="icon-facebook top-social" href="#"></a>
<a target="_blank" class="icon-pinterest top-social" href="https://www.pinterest.com/lightertaste"></a>
<a target="_blank" class="icon-instagram top-social" href="https://www.instagram.com/lightertaste"></a>
<a target="_blank" class="icon-twitter top-social" href="https://twitter.com/lightertaste"></a>
<a target="_blank" class="icon-heart top-social" href="#"></a>
</span>
</div></div>
</div>
.before-header {
background: #3d4646 !important;
clear: both;
padding: 5px !important;
text-align: center;
font-family: 'dosis-regular' !important;
font-size: 14px;
letter-spacing: 1px;
text-transform: lowercase;
}
.before-header .widget {
margin: 0 auto;
max-width: 1000px !important;
}
/* Top Navigation
--------------------------------------------- */
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff !important;
font-weight: normal !important;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #68a29c !important;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:first-child {
margin-left: 0px;
}
#top-navigation ul li:hover {
color: #79a7a5;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #68a29c;
}
#top-navigation ul ul {
display: none;
position: absolute;
margin-top: -2px;
left: 50%;
transform: translateX(-50%);
width: 150px;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
background: #68a29c;
padding: 10px;
font-size: 12px;
}
#top-navigation ul ul a:hover {
background: #3d4646;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}

Solved. Noticed this code in another area:
/*
Top Ad
---------------------------------------------------------------------------------------------------- */
.before-header {
background: #f5f5f5;
clear: both;
overflow: hidden;
padding: 10px 0;
text-align: center;
}
.before-header img,
.before-header iframe {
display: block;
margin: 0 auto;
}
.before-header .widget {
margin: 0 auto;
max-width: 1100px;
}

Related

How to do margin-top only in Firefox browser

I have menu bar which need to be margin-top: 150px;
But visually in Firefox looking different as on Chrome.
Header code: https://codepen.io/bugerman21/pen/rNxvyOv
Chrome:
Correct display
Firefox:
Incorrect display
HTML:
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li>Qwerty 1</li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
CSS:
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
How to do margin-top only for the Firefox browser?
Unsuccessful attempt:
#-moz-document url-prefix() {
.nav li ul {
margin-top: 150px;
}
}
Here ya go buddy, sorry I left for the day yesterday but see the changes made and I left outlines on the elements to give a better visual reference. As it is now it will display as expected on all browsers even old internet explorer. Although you could accomplish the same thing cleaner overall, this at least gets you back on track. Cheers and welcome to StackOverflow! :)
PS : since the nav menu items don't have a fixed height you might want to consider making that something static so you can change the top: 56px to a value that places the drop down consistently no matter the width of the screen. If you make the example full screen you'll see what I mean.
header {
display: flex;
margin: 0;
padding: 0 20px;
justify-content: space-between;
align-items: center;
background-color: silver;
}
.header {
grid-area: header;
background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
font-family: 'Gentium Book Basic', serif;
font-size: 2.5em;
color: #808080;
}
/*---------- Nav menu ----------*/
.nav {
list-style-type: none;
display: flex;
justify-content: flex-start;
margin: 0;
}
.nav > li {
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
transition: background-color .25s ease;
}
.nav a {
display: block;
padding: 20px;
color: #ffffff;
font-size: 1em;
}
.category {
padding: 0 20px;
display: flex;
align-items: center;
position: relative;
overflow: visible;
border: red 1px solid;
}
/*---------- Sub menu ----------*/
.nav li ul {
position: absolute;
top: 56px;
left: 0;
min-width: 150px;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
border: green 1px solid;
}
.nav li > ul li {
border-bottom: 1px solid #ffffff;
background-color: #1f1f1f;
}
.nav li > ul li a {
text-transform: none;
}
.nav li:hover > ul {
display: block;
}
.nav > li:hover {
background-color: #404040;
/* box-shadow: -5px 5px #1f1f1f; */
}
.nav li ul > li:hover {
background-color: #404040;
}
/*---------- Search & Profile----------*/
.search_and_profile {
display: flex;
align-items: center;
}
.search_and_profile > p {
margin: 0;
color: #ffffff;
}
.search-container button {
float: right;
padding: 6px 10px;
background: #e0e0e0;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
<header class="header">
<span class="logo">Qwerty</span>
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li><a href=#>Qwerty 1</a></li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
</nav><!-- .nav -->
<div class="search_and_profile">
<div class="search-container">
<form action="#">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div><!-- .search-container -->
</div><!-- .search_and_profile -->
</header>
It will work for me, additionally i included color too to make sure.
Also you try this option too
#media screen and (-moz-images-in-menus:0) {
/* your style */
}
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
/* Added */
#-moz-document url-prefix('') {
.nav li ul {
margin-top: 150px;
color: orange;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Some text</li>
<li>Some more text</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

overflow:scroll stops hover states from activating

link to codepen
I'm trying to make it so there is a max-height (or height) set to this very long list, and for the rest to scroll. I was able to easily achieve that with
height:800px;
overflow:scroll;
The Problem I have is that the "#subcategory" items stop displaying on hover when I apply overflow:scroll
Any ideas are greatly appreciated!
Basic HTML Structure
<!-- Start Auto Transport -->
<li id="topCategory">Auto Transport
<ul id="subContainer">
<li id="subCategory">Auto Insurance</li>
<li id="subCategory">Auto Payment</li>
<li id="subCategory">Gas</li>
<li id="subCategory">Parking</li>
<li id="subCategory">Public Transportation</li>
<li id="subCategory">Service Parts</li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="1" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat1" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Auto Transport -->
<!-- Start Bills Utilities -->
<li id="topCategory">Bills & Utilities
<ul id="subContainer">
<li id="subCategory">Domain Names</li>
<li id="subCategory">Fraud Protection</li>
<li id="subCategory">Home Phone</li>
<li id="subCategory">Hosting</li>
<li id="subCategory">Mobile Phone</li>
<li id="subCategory">Television</li>
<li id="subCategory">Utilities</li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="2" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat2" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Bills Utilities -->
relevant CSS
ul li:hover #topContainer{
display: block;
}
ul li a {
display: block;
color: $blue;
text-decoration: none;
font-family: verdana;
font-size: 14px;
}
#topContainer{
list-style: none;
color: $blue;
width: 260px;
height: auto;
background: $white;
opacity: 0.9;
position: absolute;
z-index: 1000;
height:800px;
overflow:scroll;
}
#topCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 15px;
}
#topCategory a:hover {
color: $white;
background-color: $blue;
}
#topCategory:hover #subContainer {
display: block;
}
#topCategory a {
font-size: 16px;
position: relative;
bottom: 41px;
margin-top: 46px;
margin-left: -15px;
padding: 20px 0 20px 20px;
border-bottom:1px solid $grey-10;
}
#topCategory a:hover {
color: $white;
}
#subContainer {
list-style: none;
color: $blue;
display: none;
font-size: 12px;
min-width: 230px;
width: 150px;
height: auto;
background: $white;
opacity: 0.9;
margin: -107px 0 0 245px; position: absolute;
z-index: 1000;
white-space:nowrap;
}
#subContainer a{
border-bottom:1px solid $grey-10;
margin-top: 41px;
}
#subCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 10px;
}
#subCategory:hover {
background: none;
}
.active {
background: $white;
}
#subCategory {
float: none;
// hover length
width:215px;
// hover length
text-align: left;
height: 25px;
margin-left: 15px;
margin-right: -43px;
}
Subcategory should be a Class name not an Id element, change that and things will look cleaner.
.subcategory {
}
<div class="subcategory"></div>

CSS dropdown menu remaining visible in Chrome, IE

I'm hoping someone might be able to help me with this. It looked fine in the preview mode of my program. However, when I opened it in IE and Chrome, the dropdown remains dropped at all times. I'm guessing it's a simple solution to fix it, but I have been staring at this screen for too long. To see what I'm talking about, please see the picture below.
http://img.photobucket.com/albums/v299/insane43/DropdownError_zpsa3e89f8a.jpg
CSS
body {
background: #eaeff2 url("BG Top.jpg") repeat-x right top }
.menu {
background-color: #97a7b7;
font-family: times;
color: #ffffff;
line-height: 50px;
text-align: center;
margin: 0px auto;
display: block}
.menu ul li:hover > ul {
display: block;
width: auto;}
.menu li:hover ul {
position: absolute;
display: block;
left: auto; }
.menu ul {
margin: 0px auto;
padding: 0;
display: inline-block;
text-align: center;
list-style-type: none; }
.menu ul ul{
background: #eaeff2;
top: 100%;
position: absolute}
.menu ul ul li {
float: none;
position: relative;
background-color: #97a7b7}
.menu li {
float: left;
position: relative:
width: 98%:}
.menu li ul {
display: none; }
.menu a:link, a:visited {
display: block;
height: 50px;
margin-left: 30px;
margin-right: 30px;
font-family: times;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
text-decoration: none }
.menu a:hover, a:active {
background-color: #4f5963;
text-decoration: none }
.header {
font-family: times;
color: #ffffff;
font-size: 40px;
vertical-align: middle }
.frame {
width: 98%;
text-align: center;}
iframe {
overflow: hidden;
border: 0px;
padding: 0px;
margin: 0px }
.header img {
vertical-align: middle}
.petpics img {
opacity: 0.7;
filter: alpha(opacity=70);}
HTML
<div id="header" class="header" style="position: absolute; top: 0px; text-align: center; width: 100%"><img height="140px" src="Logo.png">&nbsp&nbsp&nbsp<span class="petpics" class="petpics"><img height="194px" src="Lily.jpg"><img height="194px" src="Annie.jpg"><img height="194px" src="Smoki.jpg"></span></div>
<div id="menu" class="menu" style="position: absolute; top:194px; left:0px; text-align: center; width: 100%; z-index:1"><center>
<ul>
<li>Home</li>
<li>About</li>
<ul>
<li>Our Board</li>
<li>Our Staff</li>
</ul>
<li>Adopt</li>
<ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
<li>Lost Pets</li>
<ul>
<li>Lost</li>
<li>Found</li>
</ul>
<li>Volunteer</li>
<ul>
<li>Become a Volunteer</li>
<li>Volunteer Login</li>
</ul>
<li>How to Help</li>
<ul>
<li>Membership</li>
<li>Donate</li>
<li>Upcoming Events</li>
</ul>
<li>Education</li>
<ul>
<li>Information</li>
<li>Educational Events</li>
</ul>
</ul>
</center>
</div>
<div id="frame" class="frame" style="position: absolute; top: 280px; width: 98%; height: 100%; z-index:0">
<iframe name="display" width="100%" height="100%" overflow="visible" scrolling="hidden" seamless="seamless" border="0" margin="0" src="Home.html">
</iframe>
</div>
Thank you! Your help is appreciated. Edited to add full code.

Horizontal Table needed centering

Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).
However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
color: #FFCC00;
font-weight: bold;
font-size: 12px;
}
.style4 {
color: #000099;
font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
* { padding: 0; margin: 0; }
body { padding: 5px; }
ul { list-style: none; margin: auto}
ul li { float: left; padding-right: 0px; position: relative; }
ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
ul a:hover { background-color: #0066FF; }
li > ul { display: none; position: absolute; left: 0; top: 100%; }
li:hover > ul { display: inline; }
li > ul li { padding: 0; padding-top: 0px; }
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table;
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display:inline
}
-->
</style></head>
<body>
<div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
<li>
Home
</li>
<li>About Us
<ul>
<li>History</li>
<li>Guest Comments</li>
</ul>
<li>News</li>
<li>Accommodation
<ul>
<li>Rooms</li>
<li>Bedrooms</li>
<li>St Joseph's Annexe</li>
</ul>
<li>Visiting St Katharine's
<ul>
<li>Retreats</li>
<li>B&B</li>
<li>Events</li>
<li>Conferences</li>
<li>Catering</li>
</ul>
<li>Contact Us
<ul>
<li>Find Us</li>
</ul>
<li>Walled Garden</li>
<li>Sue Ryder Legacy
<ul>
<li>Sue Ryder</li>
<li>Prayer Fellowship</li>
<li>LRWMT</li>
</ul>
</ul>
</body>
You aren't really using a table, but you can add something like this: #horizontal-list {margin: auto; width: 850px;}
JS Fiddle with your code

HTML/CSS: Keep Hovered Image in Menu Title While Hovered Over Submenu

I have a menu that has an image for its title, and changes images when it isn't hovered anymore. However, I want it to keep the same image while I'm hovering over the submenu that opens up beneath it, rather than revert back to its unhovered state. Can this be done with HTML/CSS?
Here's the CSS Code:
ul#nav {
margin: 0 0 0 0px;
}
ul.drop a {
display:block;
color: transparent;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 0px solid #fff;
background: transparent;
color: transparent
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: transparent;
}
ul.drop ul {
display:none;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
background: transparent;
border: 0px solid #fff;
}
ul.drop:hover ul {
display:block;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
And here's the HTML
<ul class='drop' id='nav' style='padding-bottom:8px;'>
<li><img alt='Share' border='0' onmouseout='this.src=&apos;normal.png&apos;' onmouseover='this.src=&apos;hovered.png&apos;' src='normal.png' style='padding:0px; margin:0px;'/>
<ul>
<li style='background-color:#202020;width:160px;padding:0px; margin:0px;'>
<!-- Share Buttons -->
</li>
</ul>
</li>
</ul>
Mmm.. i have a special trick for you, i hope you like it. I make HTML like this :
<ul id="nav" class="drop">
<li class="icon1">HOVER ME
<ul>
<li> HIDDEN MENU </li>
</ul>
</li>
<li class="icon1">HOVER ME 2
<ul>
<li> HIDDEN MENU </li>
</ul>
</li>
</ul>
and special css trick like this:
...
ul.drop li.icon1{
background: url(YOUR_IMAGE) no-repeat left top;
width: 140px;
}
ul.drop li.icon1:hover{
background: url(YOUR_IMAGE_HOVER) no-repeat left top;
}
...
Here the demo : http://jsfiddle.net/CsV7a/

Resources