I am struggling with something.
I have two menus (http://www.omicronsolucoes.com/mat/), and I need the logo to be over the first menu. For this, I added a z-index:1 on the first menu.
But now the links on the first menu wont work (because the z-index made them go behind).
How could I maintain the logo as it is and make the links working again?
Thanks.
Try adding this to your css, not sure from where it is coming but nav#ubermenu-main-13-header-menu is getting z-index as -1, so either you add this to your css file
nav#ubermenu-main-13-header-menu {
z-index: 999 !important;
}
or try removing the z-index -1 from where is it getting applied
Try adding position relative and a greater z-index to the li. Then either remove position:relative of the ul or override it with position:static:
.ubermenu-nav{
position:static;
}
.ubermenu-nav > li{
position:relative;
z-index:11;
}
I have added margin-top:-50px; to .logo class
nav .logo {
max-height: 100px !important;
max-width: 200px !important;
margin-top: -50px;
}
Related
Inherited a educational organization website and running into an issue with a dropdown submenu getting clipped by an inner-content div. It looks like there is a z-index of 100 for that inner-content div, but no matter what I set the submenu z-index to I can't get it to layer over the div.
The menu item that is getting clipped is Connect > Interest Section (IS) > *Clipped Menu (there should be 5 visible links).
The organization URL is http://minnetesol.org/.
Clipped subnav element
if you change the following it will work but there is more at play in the styles then z-index:-
#main-nav ul ul li ul {
left: 250px;
top: -50px;
}
#content {
margin: 0 auto -40px;
}
You would need to tweak the logo in the header after making these changes.
It looks like a z-indexing issue - #content #inner-content has a z-index of 100, so you'll need to do
#head{
z-index: 101;
}
I'd also recommend lowering your #inner-content z-index to 1 and #head to 2 just to prevent more z-index issues in the future.
I have two divs which are .navbar and .content. .navbar is fixed, and .content overlays .navbar when scrolling.
JSFiddle demo is here. Please make the result panel bigger, so it doesn't show mobile menu.
But when I open dropdown menu, it is hidden under .content. Even if I set higher z-index than .content on dropdown menu, it's not working. Is it just the way it works, or am I missing something? Is there any fix on that without modifying HTML?
UPDATE:
.content div should overlay .navbar div when scrolling exactly like the demo.
just set z-index: 1 for .content and z-index: 2 for .navbar
http://jsfiddle.net/7D77j/1/
CSS :
.content {
z-index: 1;
}
.navbar {
z-index: 2;
}
.navbar z-index is less than your .content z-index thats why dropdown is not coming above the content div
Just use this css:
.navbar{
z-index:3;
}
Demo: http://jsfiddle.net/lotusgodkk/7D77j/2/
then you should remove the .navbar-fixed-top class and the padding on body
http://jsfiddle.net/7D77j/6/
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
I have a div (#socmed) with an ul containing li's which i have positioned at the top right of my page. You can find the div inside the header tag. These are social media buttons by the way.
http://digilabs.be/tutu/collection.php
As you can see, it only shows up in chrome and safari (haven't tested in IE yet).
I have tried changing the z-index, because I felt like it got overlapped by the parent div, which is colored pink. But that didn't seem to work. I have no idea what to do.
Thanks in advance for all help.
In your main.css:Line 73
Add a width to the <li> item.
#socmed li {
list-style: none outside none;
margin-top: 5px;
width: 25px; /* Add this width..! */
}
This seems to fix your problem.
Your outer #socmed div has width: 25px, but your <li> within it does not, and by default it is larger then the 25px as specified on #socmed, so would not display.
2 CSS adjustments you can make. First make a relative container (not fully tested on your page, but usually a good practice...
header {
position:relative;
}
Second, define a width for your ul list items in your header...
#socmed ul {
width:30px;
}
Hopefully this helps
This issue is related to the width of div#socmed:
#socmed{
width: auto;
height: 125px;
position: absolute;
top:8px;
right: 40px;
}
Originally, you set width to 25px, and this was not wide enough to show your icons.
This question from:
ul, ol {
margin: 0 0 10px 25px; // to margin:0
padding: 0;
}
please don't in the ul,ol such values margin: 0 0 10px 25px; It is a gobal.
I have put relative div in relative container. It worked.
I installed this plugin on a theme. This theme had a slider, but I didn't like it. So I installed this one.
http://wordpress.org/extend/plugins/content-slide/
I tried using this
#wpcontent_slider_container{
position:relative;
margin: 0 auto;
}
And this
#wpcontent_slider_container{
position:relative;
margin-left:auto;
margin-right:auto;
}
And nothing happens.
Do I have to put something in div?
Change width
#wpcontent_slider_container{
width: 500px;
margin:0 auto;
}
I had the same problem. This is how I solved it:
#wpcontent_slider_container {
margin-left: auto !important;
margin-right: auto !important;
}
#wpcontent_slider {
/* Your styling here */
}
Without the "!important" thingy the CSS didn't work fo me either.
In #wpcontent_slider_container's parent element add
text-align:center;
to center align your #wpcontent_slider_container
If you know the width of the slider, here is a little fix that worked for me when center align was being stubborn.
#sliderDiv{
position:relative;
left:50%;
margin-left:-(half the width of the div);
(ex. if div is at 500px it would be margin-left:-250px;)
}
It's not pretty, but it works. You might have to hide the horizontal overflow of the outer container though.
#wpcontent_slider_container{
text-align: center;
}
or use <center> Tag
Finally I can fix the problem with the slider ubication in my web page.
Just modify the style.css , .main_img { float:left; margin:15px 10px 0 60px}, change the values.
Using the 'margin-right' and 'margin-left' on auto !important worked for me as well. It actually also worked even without using the !important command.