I have a menu, which is responsive, the only problem it has is with the sub-level, please check the example here
http://jsfiddle.net/6vp3U/409/
.sf-menu ul {
position:static !important;
display: none !important;
}
.xpopdrop ul {
display: block !important;
}
in above example, under "Item 2" there is another sub-menu under "item 2.1", that doesn't work according to the media query, I want this to work as other sub menus working, please drag the fiddle center area to see this in action.. I know it has something to do with the css "ul".. tried a lot, couldn't find a solution, I would appreciate if someone experienced with CSS can spend 5 minutes and help me fix this..
regards
I add two selectors:
.xpopdrop ul ul {
display: none!important;
}
.xpopdrop .xpopdrop ul {
display: block!important;
}
It seems like worked...
Fiddle
Related
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
I want to remove(hide) bullets (dots) with css code, but I can`t
Please tell me what I do wrong:
1) I give class name in my case: .no-bullets
2) I use this css code:
.no-bullets {
list-style-type: none;
}
this is not working for me...
Then I use this css in theme stylesheet:
ul
{
list-style-type: none !important;
}
again nothing...
Please help me with this, thank you in advance
here is my suggestion:
ul {
list-style: none;}
the list-style properties apply to elements with display: list-item only ,make sure your list elements doesnt have any other display style.UPDATE
seeing your link your style.css file is overriding your custom style with list-style-type: disc; you have to get rid of this line.
UPDATE 2use this code in your custom css .entry-content ul > li {
list-style-type: none !important;
}
this will do the job quickly.
I have been trying to remove the bullet and indent from a < ul> element for quite a while now and I just can't figure out how - or rather why it's not working.
There are several solutions here on overflow, however none of them is working for me.
this should work(?) but it doesn't:
.widget li {list-style: none; } or:
.widget li {list-style-type: none; } (!important does not help)
here is the link to the page with the problem and a picture of the location I mean: any ideas? thanks!
http://wuttke-klima.witconsult.de/neue-firmenzentrale-der-fam-magdeburg/
that arrow is displaying from a :before just display:none it
Remove the left padding to remove padding on li
.arpw-ul li:before { display: none; }
.arpw-ul li { padding-left : 0 }
TIP : Just use google chromes inspect element to test these kind of things. just live results
Looks like you have a pseudo-element that creates the arrow bullet. You should be able to remove it with:
.footer-widget li:before, .widget li:before {
border: none;
}
If that is really a bullet (seems like it is not) then this shall help:
.widget li { display:block; }
But I suspect it is not a bullet but something else (like ::before pseudo element). Use DOM/style inspector tool in your browser.
Try this:
ul {
list-style-type: none;
}
I cannot for the life of me figure out how to center the navigation here:
www.cmee.org
I have tried the adding the "text-align: center;" attribute in the editor, but I have to admit that CSS isn't my thing. Might anyone be able to suggest how I can go about fixing this incredibly frustrating issue?
I'm incredibly grateful for any assistance that can be offered.
Add following lines at the bottom of your theme style.css file:
#subnav .wrap, #nav .wrap {
text-align: center;
}
#subnav ul, #nav ul {
display: inline-block;
padding: 0px;
}
#subnav li, #nav li {
float: none;
display: inline-block;
}
i have tested it and you can see the result here:
Did you try to use margin:auto ? give your menu for example id topmenu and make it something like
#topmenu{
margin:auto;
}
maybe also post the css for your menu if this doesnt help
My custom drop down menu has a really large change in top and bottom padding.
UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]
First off, I didn't realise I could share a fiddle ^^
Pretty epic site.
I'ma keep debugging, but thought I'd post it here to see if anyone can spot where the problem is :)
In your fieldset css you are changing the line-height, which is also applied to the dropdown.
You have to set the line-height in the css for the dropdown:
.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
line-height: 1em;
}
EDIT:
That seems to fit quite good:
.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
padding: 0;
line-height: 3em;
}