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;
}
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 am working on a WordPress site, and my initial problem was that when i had a bullet, the text would wrap around it such that some text was below the bullet point and so i wanted to align my bullets such that when text is wrapped it doesn't show below the bullet point,
so i did this in my custom css
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
which worked great except now i have bullets appearing next to the links on the drop down part of my menu, how can i exclude the code from affecting the main menu?
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
#site-header ul{
list-style:none;
}
Write a specific selector for the site-nav ul list and remove the styles. Adding the #site-header before ul will overwrite the original statement for that element. Effectively, this will apply your original style to all ul elements except the ones in #site-header
I believe wp adds #site-header automatically to the main header element. If this is not the case for your theme, just change #site-header to any parent element id specific to your header.
It's probably because you're using ul as your selector. This will apply those styles to ALL ul elements in your page. If you want to only select a single ul, you can either add an id or class to it, or you can select it's container, such as
div ul { // styles here }
You have to be more specific on your css rule, otherwise you're aplying that style to all your ULs
#parentElement ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
instead of creating that list-style-type for all ul, just create it for the specific one you want to appear the bullets. Otherwise find the main menu id and add this: list-style-type: none;
I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
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