I recently took over a WordPress site and the sub menu wasn't appearing at all. I fixed that with a li:hover style but now the sub menu appears behind the hero area. Played around with z-index to no luck.
Here's my two styles:
.main-header .main-navigation li ul {
display: none;
position: absolute;
top: 20px;
padding-top: 0px;
text-align: left;
font-size: 1em;
}
.main-header .main-navigation li:hover ul {
display: block;
z-index: 9999999999;
}
Site in question: http://brashind.com/
How about adding overflow visible to the header, like so.
<header class="main-header" style="overflow: visible;">
I would also add background-color: white; to the sub-menu class if your going to do that, so the sub menu text is visible against the hero.
This is because, you have a overflow: hidden; for .main-header class, on this css file: wp-content/themes/brashindustries/css/modules/header.css - line 28. You can either remove that line (not recommended - as an update to theme file will remove your modifications), or override it like:
header.main-header {
overflow: visible;
}
Related
I'm making an website with DIVI, and used custom CSS code to skew and style the menu buttons, but now i have this strange effect on drop-down submenus when they are out of the style completely.
I was trying to apply same styles for drop-down items, but nothing seems to work.
Maybe anyone ran in this problem? You can check the website live - http://steel.cody.lt and the problem is with PRODUCT menu dropdown.
Add this css and try
#top-menu-nav #top-menu li li {
margin: 0;
padding: 0 0px;
line-height: 2em!important;
width: 100%;
transform: skew(-1deg);
}
#top-menu-nav #top-menu li li a {
width: 200px;
padding: 6px 0px;
width: 100%;
}
Hi There when I make my browser smaller than 420px (Using Chrome Stable) the Navigation elements in the first navigation line disapear, when I hover them. I cannot find the mistake.
Can anybody help? Website is: http://www.tokemedia.de
go to style.css and change display:inline to inline-block;
#navi ul li {
float: left;
margin-left: 10px;
list-style: none;
text-align: center;
display: inline-block;/* not inline*/
}
I'm trying to build a horizontal menu with the last item seperated and positioned right, so that a logo finds place between the last and the second last item.
Firefox, Opera (Presto) and even the dirty ones from Redmond (9.0+) render it like I would expect. But WebKit (Chrome and Safari both render it the same) takes some space after the second last item where the last item would stay without position: absolute.
<header>Logo</header>
<nav>
<ul>
<li>Home</li>
<li>Statistics</li>
<li>Data Management</li>
<li>Market Research</li>
<li>Web & Apps</li>
<li>Contact</li>
</ul>
</nav>
I display the list as table and the list items as table-cell because I want the left part of the menu (first to second last item, left to the logo) to have a fixed width while the items take the width they need for their contents. Text could change to anything. Till there, everything is alright. But if I give the last item a display: block; position: absolute, WebKit renders that gap (white in the example).
nav ul
{
display: table;
background: white; /* that's what you see in webkit */
}
nav ul li
{
display: table-cell;
}
nav ul li:last-child
{
display: block; /* "display: none;" works like I would expect */
position: absolute;
}
Here is a Fiddle.
I'm not sure if it is a bug in WebKit, because absolute positioning an element inside a table might not be default behavior. On the other hand, display: none works like I would expect. Shouldn't the space consumption be 0 in both cases?
Does anybody know of a bug in WebKit or has anyone an idea of how to prevent that gap?
Set the penultimate element "Web & Apps" to display block instead of table-cell:
nav ul li:nth-last-child(2)
{
display: block;
}
Display block fiddle
I've pushed this answer on other people, and often got the "flexbox isn't widely supported yet" response. However, here it goes again. The reason that Webkit is misbehaving is that within its implementation of display: table, the DOM is reserving space for the semantically declared cell. The easy way to implement this would be to simply break this element out into its own object, much like you'd done with the logo.
HOWEVER...
if you want to keep these semantically grouped - And why wouldn't you, they're all content, right? - you can always use the flexbox model to overcome this.
Here's a fiddle showing its use.
Here's what we change:
nav ul
{
display: box;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: center;
-webkit-align-items: center;
-webkit-flex-direction: row;
background: white; /* that's what you see in webkit */
empty-cells: hide;
table-layout: auto;
}
nav ul li
{
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
Now, your items properly cover the background, as it is no longer treating the last li as if it were a true table cell and still within the bounds of the table. Flexbox provides a flexible layout to fill available space. Often people see this as a solution for the "Holy Grail of Layout" problem, but its use expands way beyond just that.
So, if another "Flexbox isn't widely supported enough" response is incoming, I understand. But I'll keep proposing it as an answer on every one of these that I come across, because support is getting better every day.
A little CSS edited, take a look at please, if this what you want, Fiddle
body
{
position: relative;
background: #bbbbbb;
text-align: center;
color: white;
}
header
{
position: absolute;
top: 10px;
left: 630px;
width: 80px;
height: 60px;
line-height: 60px;
background: black;
text-transform: uppercase;
}
nav
{
position: absolute;
top: 20px;
left: 20px;
}
nav ul,
nav li
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul
{
width: 200px;
}
nav ul li a
{
display: block;
padding: 1px;
background: #0099ff;
color: white;
text-decoration: none;
}
nav ul li a:hover
{
background: black;
}
nav li{
margin-bottom: 5px;
height: 25px;
line-height:25px;
}
While using absolute, every thing related/relating to that must be absolute in term of pixels.
I have updated fiddle, as your nav + logo .header + .nav:last-child were not totaling proper.
Fiddle link : http://jsfiddle.net/3TUk8/2/
in other case you will have to do that
nav ul
{
display: table;
background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
list-style: none;
}
I hope this solve your problem :)
I'm doing my first WordPress child theme based on the Twenty Twelve theme, and I want to move my menu up next to my header logo...
Below is an example of how it looks now, and what I want to achieve... The blue box represents the header logo, and I want my menu to appear to the right of it...
My current CSS for the menu is:
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display: inline-block !important;
text-align: right;
color: #656565;
font-size: 0.9em;
font-family: Verdana, Geneva, sans-serif;
}
I found this SO post which is regarding the same, but when I use the proposed solution from it, my menu is suddenly way down on my site below a post...
Well, got it to work by placing the position style in #site-navigation instead of my previous code and then playing around with the values (using top instead of bottom)
#masthead hgroup {float: left;}
nav#site-navigation {float: right; width: 500px;}
You also may look into changing the tag "nav" display style in the stylesheet.css file:
nav {
display: block;
}
Try inline-block or inline.
#masthead {position: relative;}
#site-navigation {
position: absolute;
bottom: 0; /* or top, if you prefer */
right: 0;
}
I am having a problem with the way my horizontal sub navigation in IE9.
This page the navigation renders great in all the rest of browsers but in IE9 it ignores the style given to the list items and pushes the subnav up against the top nav.
Here is the link to the page I am working on:
http://test.shared-vision.net/menu_test.html
and here is the link to the css"
test.shared-vision.net/css/menuestyle.css
Any sugggestions are appreciated.
On your rule #menu li.selected ul you need to set a bottom value:
#menu li.selected ul {
bottom: -40px; /* this will make it appear in the right place */
display: inline;
float: right;
padding: 0;
position: absolute;
right: 0;
width: 150%;
}