I am having issue with z-index on header only for iphone and tried multiple ways and also took reference from here https://stackoverflow.com/questions/37696746/ios-not-respecting-z-index-with-webkit-overflow-scrolling. When we scroll horizontally, I want the icons to appear above shadow.
Here is the code:
.masthead-nav-container {
position: relative;
background: #161D25;
}
.masthead-nav {
display: flex;
justify-content: space-between;
align-items: center;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
white-space: nowrap;
height: 52px;
border-top: 1px solid #535B63;
}
.masthead-nav-topics-item:last-child {
margin-right: 96px;
}
.masthead-nav-container::after {
background: linear-gradient(to right, rgba(22, 29, 37, 0), #161D25);
content: "";
position: absolute;
right: 0;
top: 1px;
bottom: 0;
height: 100%;
width: 96px;
z-index: 1;
}
.masthead-nav-topics {
margin-left: 16px;
line-height: 1;
}
.masthead-nav-topics-item {
display: inline-block;
margin-right: 24px;
}
.masthead-nav-topics-anchor {
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
color: #fbfbfb;
}
.masthead-nav-social {
position: relative;
line-height: 1;
z-index: 5;
}
.masthead-nav-social-item {
display: inline-flex;
margin-left: 8px;
}
.masthead-nav-social-anchor {
width: 24px;
height: 24px;
background: #72DA38;
}
.masthead-nav-social-item:last-child {
margin-right: 16px;
}
<div class="masthead-nav-container js-nano-container">
<nav class="masthead-nav ">
<ul class="masthead-nav-topics">
<li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Análisis</a></li>
<li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Xataka Selección</a></li>
<li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Móviles</a></li>
<li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Inteligencia Artificial</a></li>
<li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Asistentes de voz</a></li>
</ul>
<ul class="masthead-nav-social">
<li class="masthead-nav-social-item"></li>
<li class="masthead-nav-social-item"></li>
<li class="masthead-nav-social-item"></li>
<li class="masthead-nav-social-item"></li>
</ul>
</nav>
</div>
Note: It is only appearing in iphone and ipad safari browser
Related
I've been trying to search for a solution but I couldn't find any yet.
I would like to make a transparent navigational menu bar with a hero section just like in this website here https://paragonmigration.com/
I'm having trouble with the image part where the navigation menu overlapses it.
This is what I have done so far with html:
body {
padding: 0;
margin: 0;
width: 100%; /* fixes white space on the right side */
overflow-x: hidden; /* fixes white space on the right side */
}
h4 {
font-size: 18px;
}
/*#top-header {
height: 39px;
background-color: #36404a;
color: #fff;
line-height: 39px;
padding-left: 50px;
margin: 0;
padding: 0;
}*/
.top-header {
display: flex;
background-color: #36404a;
color: #fff;
height: 39px;
align-items: center;
}
.top-header > div {
margin: 0 15px;
}
.top-header > div > i {
margin-right: 5px;
}
.top-header-address {
padding-left: 50px;
}
.top-header-email {
flex: 2;
}
.top-header-facebook {
flex-basis: 2em;
}
.top-header-facebook a {
color: #fff;
}
.top-header-book {
display: flex; /* in order to center the elements inside */
background-color: #fa0505;
flex-basis: 251px;
height: 100%; /* in order to entirely stretch and fill to the parent element's* height */
align-items: center;
justify-content: center;
}
/* remove the right margin for the last div */
.top-header div:nth-last-child(1) {
margin: 0;
}
.top-header-book a {
text-decoration: none;
color: #fff;
margin-right: 5px;
font-weight: bold;
}
/*
#site-header-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
*/
.nav-menu {
display: flex;
height: 80px;
background-color: rgba(255, 255, 255, 0.6);
align-items: center;
}
/* add sticky functionality to navigation menu */
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #36404a;
color: #fff;
z-index: 2;
}
.sticky.nav-menu ul li a {
color: #fff;
}
.logo img {
height: 75px;
width: 156px;
}
.nav-menu ul {
display: flex;
flex: 4;
/*height: 100%;*/
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu ul > li {
font-size: 14px;
margin: 0 10px;
}
.nav-menu ul li a {
text-decoration: none;
color: #000;
}
.have-questions {
display: flex;
align-items: center;
justify-items: center;
text-align: center;
}
.message-icon i {
color: red;
}
.questions {
font-size: 18px;
margin: 10px;
line-height: 1.5em;
}
#slider {
position: relative;
top: -150px;
padding: 0;
background: url('../assets/images/slide.jpg') no-repeat center center fixed;
/* background-size: cover;*/
height: 750px;
color: #fff;
z-index: -1;
}
<div id="site-header-menu">
<div class="container top-header">
<div class="top-header-address">
<i class="fas fa-map-marker-alt"></i>
Address: 2903, Single Business Tower, Dubai
</div>
<div class="top-header-email">
<i class="far fa-envelope"></i>
Email Address: info#paragonmigration.com
</div>
<div class="top-header-facebook">
<i class="fab fa-facebook-f"></i>
</div>
<div class="top-header-book">
Book A Consultation
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div><!-- #site-header-menu -->
<div class="nav-menu" id="nav-menu">
<div class="logo"><img src="assets/images/logo.png" alt="logo"></div>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CANADA</li>
<li>POLAND</li>
<li>AUSTRALIA</li>
<li>NEW ZEALAND</li>
<li>UK</li>
<li>CONTACT US</li>
</ul>
<div class="have-questions">
<div class="message-icon"><i class="far fa-comment-alt fa-3x"></i></div>
<div class="questions">
<div>Have any Questions?</div>
<div>04 303 3000</div>
</div>
</div>
</div><!-- .nav-menu -->
</div><!-- site-header-menu -->
<div id="slider">
<p id="welcome">WELCOME TO PARAGON</p>
<p id="migration">Migration and Visa</p>
<p id="consultants"><em>Consultants</em></p>
LEARN MORE >
</div><!-- #slider -->
I can't seem to find a great way of sizing my logo to fit within the header, I am trying to get a result with the logo on the left side of the header and the naviagtion on the right side. I've tried this and it seems to work but I don't know if there's a better way to approach this. If anyone could give some tips it would be greatly appreciated.
My CSS and HTML
a {
text-align: center;
color: #232323;
text-decoration: none;
transition: .1s;
}
button {
border: none;
outline: none;
color: #f3f3f3;
cursor: pointer;
transition: .3s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
padding: 1em 2em;
max-height: 20%;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.logo-wrapper {
display: inline-block;
overflow: hidden;
}
.logo-wrapper img {
height: auto;
width: auto;
max-width: 150px;
}
nav {
display: inline-block;
}
.nav-item {
display: inline-block;
margin: 0 1.5em;
}
.get-started {
background-color: #f27649;
padding: 1em 2em;
border-radius: 3em;
}
.get-started:hover {
filter: brightness(85%);
}
<header>
<div class="logo-wrapper">
<a href="/">
<img src="images/devchat.png" alt="DevTalk Logo">
</a>
</div>
<nav>
<ul>
<li class="nav-item">Learning</li>
<li class="nav-item">About</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Explore</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Login</li>
<li class="nav-item"><button class="get-started" href="#">Get Started <i class="fas fa-angle-right"></i></button></li>
</ul>
</nav>
</header>
I have elements in the li list and I want to connect them using a simple line so that it looks like a pipeline.
I want to implement pipeline like structure to these elements
The HTML I have prepared
<ul>
<li class="pipeline-box">New</li> ---
<li class="pipeline-box">Order Placed</li> ---
<li class="pipeline-box">Order confirmed</li>---
<li class="pipeline-box">In Process</li>---
<li class="pipeline-box">Ready For Dispatch</li>---
<li class="pipeline-box">On the Way</li>---
<li class="pipeline-box">Delivered</li>
</ul>
The CSS for pipeline-box
.pipeline-box {
border: 1px solid #696666;
width: fit-content;
padding: 6px;
background: #cccec9;
border-radius: 50px;
font-family: "avenir Medium";
font-size: 0.8rem !important;
}
I want it like this
You're not really using the ul/li feature so I'd suggest
.pipeline-box {
border: 1px solid #696666;
width: fit-content;
padding: 6px;
background: #cccec9;
border-radius: 50px;
font-family: "avenir Medium";
font-size: 0.8rem !important;
}
.list {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center space-around;
align-items: center;
}
<div class="list">
<div class="pipeline-box">New</div> ---
<div class="pipeline-box">Order Placed</div> ---
<div class="pipeline-box">Order confirmed</div>---
<div class="pipeline-box">In Process</div>---
<div class="pipeline-box">Ready For Dispatch</div>---
<div class="pipeline-box">On the Way</div>---
<div class="pipeline-box">Delivered</div>
</div>
Sidenote: using !important is usually viewed as bad practice, avoid it if you can
Just use the CSS pseudo-element :after. The --- connectors are just presentation elements, not part of your content and as such would be better separated from the code structure.
In the example below I used :last-child to remove the extra connector in the last element.
.pipeline-box {
display: inline-block;
}
.pipeline-box::after {
content: "---";
}
.pipeline-box:last-child::after {
display: none;
}
<ul class="list">
<li class="pipeline-box">New</li>
<li class="pipeline-box">Order Placed</li>
<li class="pipeline-box">Order confirmed</li>
<li class="pipeline-box">In Process</li>
<li class="pipeline-box">Ready For Dispatch</li>
<li class="pipeline-box">On the Way</li>
<li class="pipeline-box">Delivered</li>
</ul>
And by the way you don't necessarily need the "pipeline-box" class on every element (specially if all elements have the same class, there's no point), you could use the class already on the ul and target your objects using .list li, assuming all li elements in your list will be connected. Or add the pipeline-box class to the ul instead.
Added a span inside li which will contain the text and will be shown as bubble and then I made that link using the ::before of li.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.pipeline-box {
display: inline-block;
margin-bottom: 10px;
margin-right: -5px;
position: relative;
width: auto;
}
.pipeline-box::before {
background: #c5c5c5;
content: "";
height: 1px;
left: 32px;
position: absolute;
right: 0;
top: 50%;
z-index: 0;
}
.pipeline-box>span {
background: #f8f8f8;
border: 1px solid #c5c5c5;
border-radius: 50px;
display: inline-block;
font-family: "avenir Medium";
font-size: 0.8em !important;
line-height: 1em;
margin: 0 30px 0 0;
padding: 7px 12px;
position: relative;
z-index: 1;
}
.pipeline-box:last-child>span {
margin: 0;
}
<ul>
<li class="pipeline-box"><span>New</span></li>
<li class="pipeline-box"><span>Order Placed</span></li>
<li class="pipeline-box"><span>Order confirmed</span></li>
<li class="pipeline-box"><span>In Process</span></li>
<li class="pipeline-box"><span>Ready For Dispatch</span></li>
<li class="pipeline-box"><span>On the Way</span></li>
<li class="pipeline-box"><span>Delivered</span></li>
</ul>
I figured out the solution.
the HTML page is now
<ul class="pipeline-box">
<li><span>New</span></li>
<li><span>Order Placed</span></li>
<li><span>Order confirmed</span></li>
<li><span>In Process</span></li>
<li><span>Ready For Dispatch</span></li>
<li><span>On the Way</span></li>
<li><span>Delivered</span></li>
</ul>
and the SCSS is
.pipeline-box {
li{
align-content: center;
border: 1px solid #696666;
text-align: center;
width: 125px;
padding: 6px;
background: #f8f8f8;
border-radius: 50px;
font-family: "avenir Medium";
font-size: 0.8rem !important;
position: relative;
}
li:after{
content: '';
width: 17px;
height: 2px;
background-color: #afa4a4;
position: absolute;
z-index: 0;
top: calc(50% - 2px);
right: -18px;
}
li:before{
content: '';
width: 17px;
height: 2px;
background-color: #afa4a4;
position: absolute;
z-index: 0;
top: calc(50% - 2px);
left: -18px;
}
li:last-child:after {
display: none;
}
li:first-child::before {
display: none;
}
}
It looks like this now.
result
Working on a header and currently using Flexbox to position the header and everything is positioned center correctly like I want when I test locally on my Mac but when others on my team are testing in IE or Windows based machines the header is no longer being positioned in the center. It becomes full width positioned either left or right and I'm really not sure what I am missing or doing incorrectly. Any help would be appreciated.
What it should look like
What it's doing on a Windows machine
html
<header class="mcc-header ember-view">
<div class="mcc-full mcc-div">
<div class="mcc-header-content">
<a href="/" class="mcc-header-logo">
<span class="mcc-logo-title">MCC Semi</span>
</a>
<ul class="mcc-header-nav">
<li class="mcc-header-nav-item">
Company Profile
</li>
<li class="mcc-header-nav-item">
News
</li>
<li class="mcc-header-nav-item">
Contact Us
</li>
<li class="mcc-header-nav-item">
EN | CN
</li>
<li class="mcc-header-nav-item">
</li>
<li class="mcc-header-nav-item">
Login
</li>
<li class="mcc-header-nav-item">
Sign Up
</li>
</ul>
</div>
</div>
<div class="mcc-full">
<div id="main-menu" class="mcc-header-menu">
<div class="mcc-full">
<div class="mcc-header-legal">
<ul class="mcc-header-legal-list">
<li class="mcc-header-legal-item">
Products
</li>
<li class="mcc-header-legal-item">
Catalog
</li>
<li class="mcc-header-legal-item">
Applications
</li>
<li class="mcc-header-legal-item">
Quality
</li>
<li class="mcc-header-legal-item">
Calendar
</li>
</ul>
</div>
</div>
<form class="mcchf" id="mcchf-h-search" action="" method="get" title="" role="search">
<label class="mcchf">Search</label>
<input class="mcchf" id="mcchf-h-st" type="text" name="q" placeholder="Search">
<label class="mcchf">Submit search query</label>
<input class="mcchf" id="mcchf-h-sb" type="submit" value="">
</form>
</div>
</div>
</div>
</header>
css
.mcc-header {
background-color: #fff;
display: block;
padding-bottom: 24px;
position: fixed;
width: 100%;
height: 90px;
top: 0;
left: 0;
padding-right: 50px;
padding-left: 50px;
z-index: 800
}
.mcc-header-content {
display: flex;
flex-direction: column;
padding-top: 6px
}
.mcc-header-nav {
column-count: 2;
display: block;
width: 100%
}
#media screen and (min-width:760px) {
.mcc-header-content {
flex-direction: row;
justify-content: space-between;
padding-bottom: 0
}
.mcc-header-nav {
column-count: 3;
width: auto
}
}
#media screen and (min-width:1020px) {
.mcc-header .mcc-header-content {
align-items: flex-start;
padding-top: 0
}
.mcc-header .mcc-header-nav {
column-count: 1;
width: auto
}
}
.mcc-header-nav-item {
display: block;
text-align: center;
width: 100%
}
#media screen and (min-width:1020px) {
.mcc-header .mcc-header-nav-item {
display: inline;
text-align: left;
width: auto
}
}
.mcc-header-nav-link {
display: block;
margin-bottom: 0;
padding-bottom: 20px;
padding-top: 4px;
white-space: nowrap
}
#media screen and (min-width:760px) {
.mcc-header-nav-link {
display: inline-block;
padding-right: 24px
}
}
.mcc-header-legal {
border-bottom: none;
display: flex;
flex-direction: column;
justify-content: center
}
.mcc-header-legal-list {
display: block;
text-align: center;
}
#media screen and (min-width:760px) {
.mcc-header-legal {
align-items: baseline;
flex-direction: row;
margin-top: 0
}
.mcc-header-legal-list {
text-align: left
}
}
.mcc-header-legal-item {
display: inline-block;
padding-right: 24px;
padding-top: 24px;
text-align: left;
white-space: nowrap
}
.mcc-header-legal-item:last-of-type {
padding-right: 0
}
#media screen and (min-width:1020px) {
.mcc-header .mcc-header-legal-item {
margin-left: 0 !important;
padding-top: 8px
}
}
.mcc-header-logo {
display: block;
flex-shrink: 0;
padding-bottom: 0;
padding-top: 8px;
position: relative
}
.mcc-header-logo .mcc-logo-title {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px
}
#mcchf-h-search {
position: absolute;
top: 56px;
right: 5rem;
width: 250px;
height: 22px
}
#mcchf-h-search label.mcchf {
display: none
}
#mcchf-h-st {
position: absolute;
right: 30px;
width: 225px;
height: 22px;
padding-left: 5px;
cursor: text;
color: #111;
border-bottom: 1px solid #000;
border-top: none;
border-left: none;
border-right: none;
background: #fff;
-webkit-appearance: none;
border-radius: 0;
text-transform: none
}
#mcchf-h-sb {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
width: 18px;
height: 18px;
cursor: pointer;
white-space: nowrap;
color: #000;
border: 0;
background: url('');
}
input {
display: block;
margin-bottom: .667em;
font-family: inherit;
font-size: 1rem;
line-height: 1.333em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-repeat: repeat-x;
background-size: .09em .09em;
background-position: 0 90%
}
I'm really pulling my hair out on this one...I have a dropdown menu which is hidden but displays when the user hovers over a list item. However, the list item gets shifted downward on hover, instead of staying put. Which makes the menu shift further down than I want.
My code: http://codepen.io/anon/pen/PPYKJg
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
html {
overflow-y: scroll;
}
body {
margin: 45px 0px;
text-align: center;
background: #191919;
}
.header {
color: #FE353D;
}
#top-menu {
background-color:rgba(0,0,0,0.85);
height: 34px;
width: 49.1%;
float: right;
position: relative;
margin-top: 15px;
top: 21px;
left: 88px;
font: bold 20px sans-serif;
border-top-left-radius: 10px;
z-index: 10;
}
#top-menu:hover {
}
.more-menu {
background-color: #111111;
display: none;
position: relative;
top: 16px;
right: 25px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
.toplink {
margin-right: 35px;
}
ul {
text-align: left;
display: inline;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
margin-right: 30px;
padding-top: 5px;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
li.option {
margin-left: -30px;
margin-top: -25px;
}
$('#top-menu').hover(
function (){
$('.more-menu').css('display','inline');
},
function (){
$('.more-menu').css('display','none');
}
);
Any idea what's happening here? This is driving me crazy!
well all I could see is the .more-menu not diplaying right below the top menu so to fix that change the top property of the .more-menu class to this so to make the dropdown menu display right below the navigation menu
.more-menu {
background-color: #111111;
display: none;
position: relative;
top: 0px; /*this was 16px but is now 0px*/
right: 25px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
I made my own out of your HTML you can go off of.
JsFiddle: https://jsfiddle.net/469knbfq/
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
#header{ background: #000; padding: 15px 0px; }
#menunav{ }
#top-menu{ }
ul{ display: inline; margin: 0px; padding: 0px 0px 0px 20px; }
li{ display: inline; margin: 0px 10px; }
a{ color: #FFF; font-size: 18px; text-decoration: none; }
.more-menu{ background : grey; margin: 0px 0px 0px 20px; padding: 0px; display: none; }
JS:
$('#top-menu').mouseenter(function(){
$('.more-menu').css('display','inline-block');
});
$('#top-menu').mouseleave(function(){
$('.more-menu').css('display','none');
});
note: I am using JQuery
Thanks for the feedback...I actually wound up fixing my own problem by tweaking the CSS and the jQuery a bit. See below for the updated code:
http://codepen.io/anon/pen/ZbzvGQ
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
html {
overflow-y: scroll;
}
body {
margin: 45px 0px;
text-align: center;
background: #191919;
}
.header {
color: #FE353D;
}
#top-menu {
background-color:rgba(0,0,0,0.85);
height: 34px;
width: 49.1%;
float: right;
position: relative;
margin-top: 15px;
top: 21px;
left: 88px;
font: bold 20px sans-serif;
border-top-left-radius: 10px;
z-index: 10;
}
.more-menu {
background-color: #111111;
display: none;
position: absolute;
float: clear;
top: 35px;
right: -32px;
height: 27px;
width: 475px;
font: bold 14px sans-serif;
outline: 1px solid #000000;
z-index: 11;
}
.toplink {
margin-right: 35px;
}
ul {
text-align: left;
display: inline;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
margin-right: 30px;
padding-top: 5px;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
li.option {
margin-left: -30px;
margin-top: -25px;
}
JQUERY:
$('#topmenu-other, .more-menu').hover(
function (){
$('.more-menu').css('display','inline-block');
},
function (){
$('.more-menu').delay(7500).queue(function(next){
$(this).css('display','none');
next();
});
}
);
This keeps the >> symbol in place when hovered over and also keeps more-menu displayed for a time while the user decides what option to choose.
Thanks again! :)