I loaded directly link to display the menu.
This menu is organized force-lists because it is a wordpress menu levels and sublevels.
Unfortunately, as you can see at the end of the sublayer have a double line.
the effect should be like the first where the link is in two rows.
Can you give me a hint?
http://www.circuitosanmartinodellago.com/test/index.html
You can use CSS3's :last-child pseudo-class
#menu-main-menu li:last-child {border-bottom:none;}
support is good (IE 7/8 not included) http://caniuse.com/#search=last-child
So is this being used in wordpress? If thats the case you can apply CSS elements to individual menu items, which wordpress generates by default, which should solve this issue. Just apply your own custom style to that one navigation item such as #menu-item-1.
Related
My menus in my application looks something like this :
But I want the menu items to have a different background color. So I tried adding :
QMenu::item:selected {
background-color:green;
color:white;
}
And now it looks like this :
Notice that when I hover my mouse over the menu, there is some sort of 'unalignment' with the menu items. How can I resolve this issue?. Any help would be highly appreciated!
The built-in style system and CSS are mutually exclusive. If you're styling a control via CSS, you must style all of it. By applying CSS to one style of a menu item, you've lost the rest of the built-in style, and your CSS must then take care of all aspects of the styling. I.e. you need to style also non-selected items!
I am trying to restyle the navigation bar on the following website.
The website use Bootstrap and a navbar as main navigation and a navbar-subnav as a secondary one.
Even though i dont have a problem styling the two navs, it seems i can style the hover state of the subnav.
Whatever i try it keeps the same hover state with the main navigation.
here is the page: https://www.suug.co.uk/sustainabilityhub/test2017/
the Societies/Sports etc is the main one, and the test2017 is the secondary one
thank you
Not sure if I fully understood your question but to style elements differently you have to have a selector that matches only one of your elements and make the differences there.
have a small problem with facebook comments. For some reason my theme is not very compatible with the plugin.
If you click to inspect the element, it will fix on it's own then (no idea why).
Also I would like if you add more text into the comment box the content below the box doesn't move down. So is there a way to align the box correctly only with the css? ( I have tried 2-3 different plugins, but I had the same problem)
Website: http://www.viskasseimai.lt/
P.S. it works great on a singple post, but something is wrong inside the home page...
Plugin used: https://wordpress.org/support/plugin/facebookall/page/3
The problem lies in the absolute positioning of the .blog-grid elements. The position and top values are explicitly declared and set as inline styles before the facebook comment box is appended to the element. So these calculations don't factor in the additional element because they occur before it's introduced.
CSS
.blog-grid.element.column-1.masonry-brick {
position: relative !important;
top: auto !important;
}
The above rules will over-qualify the inline rules for every instance of the element since the !important declaration has been used.
If you want these rules to only apply to the home page, add .home as a preceding selector before .blog-grid, same methodology would apply to archive pages or specific taxonomy type pages.
I'm using jqUI to build an app with a content pane and side-menu.
When the page is showing the list, I want to hide some of the menu content, but when the page is showing an item, I want to show the menu content.
I've created a pretty basic jsfiddle as an example http://jsfiddle.net/pq83M/8/
I DON'T want to do this in javascript, as the page transitions are in the jqui library and I don't think it's effective to listen for this specific transition separately fro the others.
What I am hoping to figure out is a way of saying
when
div#content > div#list_item.active ~ div#menu > div#list_item_details {
display:block;
}
with the caveat that the ~ is looking for the sibling of div#content, not the sibling of div#list_item.active.
I'm using Sass, so those custom selectors are available.
If I understand your question correctly, you want to find siblings based on the parent (div#content) but only start with particular parents depending on their children (div#list_item.active).
If so, it's not possible in CSS Selector Level 3, but it's coming in CSS Selectors Level 4; you'll be able to select the subject of your operation/comparison. http://dev.w3.org/csswg/selectors4/#subject
I have three menus on this test web site. I am learning css and trying menu2 & menu3 to inherit all properties from menu class. The second one looks bit different and is not clickable. I am happy with the 3rd one, just want to make it horizontal and change its position bit.
Could somebody tell me
why the second menu is not click-able?
how I can make the third menu vertical? I thought that display: block; for li of the 3rd menu would do the trick but I do not know the css path for that li.
Your second menu isn't clickable because your third menu box is covering it, it's box even though you can't see it is the same size as the area covered by the double horizontal lines.
The third menu isn't vertical because the lis have float:left
Use the following css to correct
.menu3 li
{
float:none;
}
.menu3
{
position:absolute;
}
You will need to set the left/top options for the .menu3 to position it on the page where you want.
If you use firefox firebug you should install the web developer and firebug extensions. If you use safari you can enable the developer tools, if you use internet explorer 8 then you can also enable developer tools. (Firebug is the best in my opinion).
The second menu is not clickable because the third menu is covering it. One way to fix that is to remove position: relative from .menu.
The path for the <li>'s in the third menu is for example .menu3 li, but I am not really sure what you mean by making it vertical. I hope you can find out a way with this piece of information.
A little hint... A tool like FireBug for Firefox is of good help for CSS trial n erroring.