I'm trying to duplicate the style of an existing menu using CSS.
The CMS platform that I'm using comes with given styling for the navgation. I added a new menu underneath it and am trying to make it look the same as the original. I added an ID "wpmenu" to the div that contains the navigation but the selectors don't select. I created a jsfiddle but the jsfiddle works!
It's really frustrating and I'm not sure where to turn. The html and CSS are here: http://jsfiddle.net/nRrKW/
The particular selector that seems to be failing is #wpmenu li a
Again, it works in jsfiddle but not on my website which is here: advance.trashswag.com.
I had expected to see the following CSS apply to the newly created UL nav within the "wpmenu" div:
#wpmenu li a {
display: block;
position: relative;
padding: 7px 12px;
color: #fff;
overflow: hidden;
text-transform: uppercase;
font-size: 120%;
}
But if I then inspect element on the site, the styling is not applied to those a elements.
Can anyone point out what I'm missing here?
You don't seem to have the #wpmenu li a style
also you have an invalid rule token here:
#wpmenu ul {
padding: 0;
margin: 0;
list-style: none;
}}
That might fix it!
Related
I have a personal site set up running on apache with javascript at home and am just now starting with Server Side Includes. I have a styled navigation bar saved as a separate HTML file in the root of my site. Within this file is some Style (CSS) and, when including this navbar (with style included), the style is attributed to everything else that is not within the navbar.html file. Code link here. Partial code below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
This is a short section of the CSS within the navbar.html file which is included on many of my pages. This is meant to be style for the navbar itself (again, which is in the same navbar.html file, link above) and only itself. I find that if I have other (eg.) unordered lists on those pages, they also get affected by the style which is included but only intended for the navbar. Another problem I had with this was that CSS that was actually in those pages were affecting the navbar (eg. here the links in the navbar changed colors).
So, I guess my overall question is, how do I make it so the SSI includes are separate from any other style found on the actual page? Thanks!
CSS on a page (even if it's via an include) affects everything on that page. Use more specific CSS selectors - give your navbar a class or ID, then target only that class/ID.
<div id="navbar">
<ul>...</ul>
</div>
#navbar ul { ... }
#navbar li { ... }
etc.
I have drop-down menu which work properly but there is a problem with CSS style. If I have there on the top CSS file:
* {
margin: 0;
padding: 0;
}
Everything is allright. But if I removed this block, I will get this result http://jsfiddle.net/BERRF/8/. How can I fix that to look like as before with star's block? Answer into jsfiddle would be best. Thanks advance.
* is universal selector. which applies css styling to all the elements.
In your case, you need margin: 0 and padding: 0 only to the ul and h3 elements present in the #accordian element.
So, use #accordian ul instead of using *.
#accordian ul, #accordian h3{
padding: 0;
margin: 0;
}
JS fiddle
Alrighty, as asked, here is my question reformatted:
I am using bootstrap. My nav bar has a drop-down. But the drop-down is appearing under the wrong nav item.
This is only happening for me on FireFox 20.0 on a 2010 MacPro OSX 10.8.3
It does work on other browsers (Chrome and Safari)
Here are some links. The nav item at the far right (Zone Tools) should have the dropdown.
Image alone:
tinypic.com/r/e0kqp/5
Code is put up here. Little funkyness because I tried to strip it down to just the nav bar, but you'll get the gist.
http://bootply.com/61045
I have more links, but I cannot put more than two in at a time so far.
Thank you all.
It looks like the problem is this in your CSS..
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
font-size: 13px;
}
.navbar .nav ul li {
display: table-row;
width: 1%;
float: none;
font-size: 13px;
}
When you remove this it works, but you'll need to figure out another way to center your nav items. http://bootply.com/61059
P.S. - you don't need to include the Bootstrap scripts in Bootply.
I am trying to display disc in nested ul items but with no success. I am not familiar with this behaviour but suspect that it might have something to do with relative & absolute positions of lists:
<ul class='top'>
<li><a>whatever</a>
<ul class='sub'>
<li><a>whatever sub</a></li>
</ul>
</li>
</ul>
ul.top{
position: relative;
}
ul.sub{
position: absolute;
width: 100%;
list-style-type: disc;
}
ul a{
position: relative;
display: inline-block;
z-index: 9999;
}
}
COMPLETE JSFIDDLE HERE
Items appear just the way I want but my style disc is missing.
Any help appreciated.
EDIT: okay, I think you wanted to have the disc appearing in such menu.. then my solution is not good for that - just wanted to give you a simpler way of building menus with lists. sorry if I misled you with this.
I kinda give up, the HTML is making my head hurt :)
But the problem lies with the messy position:relative/absolute declarations plus the display:inline set somewhere on <a> tag..
Here's how you should build your menu list - much simpler (example on JSFiddle)
Here's the problem:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: black;
font-family:"Times New Roman", Times, serif;
}
list-style: none; is preventing the list symbol from being shown at all. Remove that, and it should work fine.
In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.
I want to clone the menu of a hardcoded site (edit removed link)
How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?
In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.
My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?
#block-system-main-menu .content {
font-size: 17px;
font-weight: bold;
}
#block-system-main-menu div ul li {
width: 207px;
margin: 4px 0px;
}
#block-system-main-menu div ul li {
display: block;
height: 38px;
background: url(/sites/all/themes/schott/menuitembg.gif);
}
#block-system-main-menu div ul li .active-trail {
display: block;
height: 60px;
background: url(/sites/all/themes/schott/menuitembg_p.png);
}
div ul li ul li.leaf { /* both styles are overwritten */
display: inline-block;
background: url(/sites/all/themes/schott/subitem_passive.gif);
}
The last CSS rule written is the one that is used, but specificity takes priority over cascading.
An article on specificity: http://css-tricks.com/specifics-on-css-specificity/
So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.
yes, the order of CSS definitely plays a role. Anything declared after a style overwrites the previous one. Also, if you want to overwrite default styles of some sort, include them after the default ones (whether you write them in the same file, or just do a meta link to your own stylesheet).
Change it to:
#block-system-main-menu div ul li ul li.leaf {
I'm slightly confused by what you're asking, but in general, if you have two identical rules, the later will be applied. However, if rules are not identical, the more specific rule will take precedence.
Edit: sorry, I can see you just figured that out