I am having some troubles in styling the top dropdown menu here so that it creates a toggle effect. I am using padding to delimit the hover area but then there is no chance I can hover over the submenus.
#topmenu {
background-color: rgba(0,0,0,1);
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 20pt;
position: fixed;
width: 100%;
top: 0;
}
add z-index: larger-number to #topmenu to make sure the menu is always on the top level, so it can be hovered.
css transform will change the z-index order. you used it on the h2. it covered the submenu.
in actully, change nothing, but scroll down your page. you'll find the hover issue on menu gone.
Demo for rotate element covered absolute element:
http://jsfiddle.net/rainthinks/xswrg/
the fix: http://jsfiddle.net/rainthinks/xswrg/1/
some refs:
http://daneden.me/2012/04/css-transforms-and-z-index/
http://www.w3.org/TR/css3-2d-transforms/
Make the padding and margins 0; and also give the code so that I could understand any other problem.
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
Please see the example.
http://jsfiddle.net/ojLxdw6v/
Button and button container both have border-radius. Also button container has overflow: hidden.
But somehow corners are visible while transition.
I thought to add overflow: hidden to Button.
But it's no luck also. Transparent semicircles appear between container border and link background on the right and left side.
Just add overflow:hidden to the .btn and change the background color after the pseudo-elements have moved.
JSfiddle Demo
.btn{
position: relative;
z-index: 20;
display: inline-block;
padding: 9px 34px 9px;
font-size: 18px;
color: #000;
text-decoration: none;
border: 6px solid #fed37f;
border-radius: 25px;
overflow: hidden;
transition: background 0 ease 500ms;
}
.btn:hover {
background:#fed37f;
}
I'm using a transparent png file for the background for my h2 and h4 elements it has a shadow at the bottom which I'd like to appear over the featured images like you can see here: https://redpen.io/epqvnw
Right now on the site http://www.mediray.co.nz/preview the h2 background is cropped. I've worked with inspect element exhaustively. At some point I could get it on top but it lowered the opacity of every other element on the page. I am using background-color: rgba(0,0,0,0.6); for my site-inner I guess they're must be a conflict.
Any help or direction would be greatly appreciated. If I wasn't clear enough or you need further information please let me know.
Add position: relative and z-index: 1 in dynamik.css at line 1457
#ez-home-container-wrap .ez-widget-area h4,
#ez-home-slider-container-wrap .ez-widget-area h4 {
border-bottom: 0px solid #DDDDDD;
color: #838383;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
font-size: 2.2rem;
position: relative;
z-index: 1
}
I'd suggest simply using an invert box-shadow on the image, creating the illusion of a shadow being cast by the heading. Like so:
box-shadow: inset 0px 10px 5px -5px rgba(50, 50, 50, 0.75);
jsfiddle: http://jsfiddle.net/jtFb8/
Or if you don't want to use CSS3 then put the shadow on the top of the image rather than the background of the header.
I have these drop down menus HERE created using CSS on the Products, Support and Community nav links. The drop down menus have rounded corners on the bottom. The hover effect on the last link overrides the rounded corner and squares it off which I do not want. I would like the rounded corners to remain even on the hover on the last bottom link of the drop down. I think I need a property of overflow:hidden (?) on one of the styles but I've tried everything and I can't get it to work properly. What am I missing?
The CSS is HERE.
Thanks!
The issue is that the border-radius property doesn't change the boundaries of the <ul> element, rendering overflow: hidden; useless when the <li> elements get a background color.
My solution would be to apply border-radius: 0px 0px 8px 8px; to each of the bottom <li> elements in your drop-down menus.
Try setting overflow: hidden; on .menu ul
CSS Border Radius is not inherited from its parent as you can see in this fiddle:
http://jsfiddle.net/sZtHk/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS
.outer {
background: #ff0000;
width: 100px;
height: 100px;
border-radius: 24px;
}
.inner {
background: rgba(0, 0, 0, .25);
width: 100px;
height: 100px;
}
You need to apply the borderadius that you have on your <ul> to the last link item. If your hover state is controled by the <a> tag then you need to apply it there also.
.menu ul li:last-child { border-radius: 0px 0px 8px 8px; }
You may also, or alternatively need this:
.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }
I am lost at how can I fix this problem ... Chrome is the top 1 and FireFox below
CSS looks like
#mainnav ul {
background: #a51c10;
padding: 5px 0;
margin: 0;
-moz-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
-webkit-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
box-shadow: 0 2px 6px rgba(60,60,60,0.8);
position: relative;
z-index: 2;
}
#mainnav li {
display: inline;
padding: 0;
margin: 0 2px;
position: relative;
}
#mainnav a:link, #mainnav a:visited {
padding: 4px 10px 5px;
font-size: 16px;
line-height: 1em;
font-weight: bold;
color: #a29061;
text-decoration: none;
}
UPDATE
it looks alittle different somehow from the working site (I dont think I can post a link tho) but copy & paste CSS
http://jsfiddle.net/aM8rn/4/
it appears I should put line-height: 1em in the #mainnav ul
http://jsfiddle.net/aM8rn/5/
In order to avoid this sort of problems is always a good idea to reset the default style: http://meyerweb.com/eric/tools/css/reset/
putting line-height on the #main nav ul is making the link overlap the outer box for me..
I'd suggest not using line-height at all. You have px padding on your links to try to get them to match the outer ul's line height, there might always be 1px differences if you try to do that.
instead I tried to let the outer container expand as required with the links themselves, in order to do this they had to be display: block; and for your inline li elements to remain side-by-side with blocks inside them, they had to become inline-blocks.
with this fiddle every px can be controlled with the padding on the a's - http://jsfiddle.net/g5AXG/1/
I know you probably don't want a top bottom "border" but I marked where how it can be removed.. the negative wordspacing is because inline-blocks, the li's, will naturally have about 3-4px between them (like words) I didn't think it made a difference to the aesthetics of your menu if it was there or not, but put it in anyway