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.
Related
I am trying to style my WP Menu Navbar. I want that the Pages that have children pages can be styled differently (mainly reducing the bottom margin, so that it is clear that the children pages belong to the parent page).
I know how to inspect a site and tried to target possibly every class that is listed there. But nothing is working. The site isn't live yet, but I will attach a screenshot of Google Inspect. It's the "menu-item-425" that I want to style differently.
I tried targeting like this:
.main-menu-links .menu-item .menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
But nothing changes. Any advice?
Try to remove space between .menu-item and .menu-item-has-children like this
.main-menu-links .menu-item.menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
I guess these are classes of the same element.
I am working on a website simplemedia.dk
i have a responsive menu that works, but when i am trying to define the in responsive mode the browsers does not recognize the style ..
in responsive mode i get a class called "responsified" and i tried adding the class .responsified in front of my navigation style but it doesnt react to it.
.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled #navigation ul.menu {
display: block;
float: left;
}
.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled #navigation ul.menu li {
display: block;
float: left;
}
In normal mode i want it to display table-cell which it does, but in responsive i want it to show block.
When you use a long space-separated string in your CSS selector like this...
.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled
...you are telling the browser "find me something with the class .responsive-toggled which has a parent with the class .responsified which in turn has a parent with the class .absolute which in turn has a parent with the class .responsive-menus-0-0...", etc. etc.
In your actual page, all those classes listed above are applied to a single element.
In CSS, to target an element with multiple classes, you chain them (no spaces):
.responsive-menus.responsive-menus-0-0.absolute.responsified.responsive-toggled
But this is almost certainly way, WAY more complicated than you need for this situation.
Your situation probably needs nothing more specific than this:
.responsified #navigation ul.menu {
display: block;
float: left;
}
.responsified #navigation ul.menu li {
display: block;
float: left;
}
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!
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.
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