How can I style my sub menu items? I have a custom made template, one module and one main menu, the sub menu items are all set as a child of the main menu.
My problem is that I don't know what to refer to when styling them. I could style all "nav-child unstyled small" or make classes using the li class number, i.e. ".item-134"
(I got these tags from the source code displayed by my browser).
Neither of these seem to be nice solution, is there any nicer way to do this?
David Fritsch is correct by using the menu-id classes to help select. Another alternative if you're worried about changing ID numbers is to use CSS3 nth-child selectors. You'll end up with something like:
.nav > li:nth-child(3) .nav-child {}
This will select the 3rd top-level item and then the child-items beneath it, and it's ID-free.
Related
I have been trying to conditionally remove the menu arrow at the end of a Select box in my current project which uses gwt-bootstrap3.
I have tried the following options:
<select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showMenuArrow="false">
<select:Option ui:field="option1" text="option1Text"/>
</select:Select>
I have also tried via the api, using
fieldName.setShowMenuArrow(false);
I am mainly looking to disable this menu arrow when I would like to indicate that this selector is disabled and that options are not available for select dropdown.
On inspecting element via the browser:I noticed that within the div for the select box there are other divs/spans and one nested as a child of the main selector div specifically with the
<span class="caret"></span>
On removing this class name I could make the menuArrow disappear.
However accessing the specific span tag with this caret class using a querySelector and then making sure this is the right one (from the entire page which has other such selectors too) seems a slight challenge and unwieldy.
Here's a snippet from the inspectElement on chrome.
inspecting the Select element and the span with caret
This seems like a bug in the menuArrow handling for the Selector and if it is indeed one, can anyone suggest a workaround until fixed?. Appreciate your suggestions/answers. Thanks!
The setShowMenuArrow method is for something else: it turns on/off this arrow:
If you want to hide caret on all disabled Select boxes you could try with css:
.bootstrap-select.disabled .caret {
display: none;
}
If you want to hide it only some of them, first add new class name, for example no-caret-on-disabled and use this:
.bootstrap-select.disabled.no-caret-on-disabled .caret {
display: none;
}
I'm trying to make some nav menu items non-clickable if they have sub categories. I figured out how to do it for parent items but I'm have trouble with child items -making them non-clickable if they branch to lesser categories.
`enter code here`#nav-wrap .wsite-nav-0 a, .wsite-nav-1 a {pointer-events: none;};
Is sounds like what you are looking for is a parent selector, such a selector does not currently exist.
Some options:
Set a class for those you dont want to be clickable. Simple and to the point.
Use the href attibute as part of the selector, and set href="#".
Instructors [Other stuff here]
/*CSS*/
#navigaion a[href="#"] {pointer-events: none;}
Finally re-think. I always try to have a page for everything in my menus. Have a general instructors page with a paragraph or two about the group, then links to the indidvidual instructots.
I am having an issue when trying to remove a list-style from a shortcode generated tabbed system within WordPress. I was successful using the provided solution:
.entry-content ul.nav-tabs li { list-style:none; }
On the majority of pages the code above works.
Please reference the link below to see how Zoolian's solution worked on this page (you can see listed items below but no list-style on the tabbed menus above):
http://www.drphyllisbooks.com/drbooks2014/books-neural-therapy/what-is-bnt/
Although, there is one page where this is not working. Please see the following link:
http://www.drphyllisbooks.com/drbooks2014/books-family-health-center/
I would like to remove the bulleted list style from the menu tabbed option and still conserve a list style within the tabbed content area.
Any help or ideas would be greatly appreciated. I received help for this from Zoolian but unfortunately it is not working in this area of the site.
Thank you and I thank you for your time and consideration.
It might help you to read something about the specificity of CSS selectors. The specificity decides which CSS attributes get applied to an element. The attributes with the most specific selectors get applied.
In your case .entry-content ul.nav-tabs liis more specific than ul.nav-tabs li so that's probably the reason why the latter worked for you.
A (very) detailed post about specificity is e.g. this one: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.
Is there a simple way to create a customer menu in WordPress that does not output a list? Basically I want a menu with pipes between the links. Every solution I've found says to style them with a right border or background image, but I'm not crazy about this solution and what if I wanted something like a "/" or "ยป" between each link? I think live type would look better too. I already know I can remove the container div and ul tags using "items_wrap" and "container". Any ideas on how to ditch the li's too and add separators? A filter or hook?
I'm looking to do this with WordPress functionality. I know I can resort to CSS and jQuery if needed and in fact am doing that, but I'm still curious as to how to override the menu system.
Just style the list propperly
li { list-style-type:none; }
li:before { content:"/ "; }
http://jsfiddle.net/sVvs8/
I have some code in HTML and CSS where HTML looks like this:
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
And my CSS looks like this:
#avmenu
{
Style details
}
#avmenu li a:hover
{
Style details
}
a:hover{ Hover styles }
So above piece of code shows a menu item and does some animation like color change etc when you hover your mouse over the menu. I have show bare minimum styles sufficient to explain problem at hand.
Now when I migrate this to GWT. We have used Label as menu items, and I want to achieve same effect in GWT too. Here is what I have tried
I tried to apply CSS Style named "avmenu", this applied basic styles, but of course didn't get animation
Then I tried DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); but that also didn't help.
What would be my best option with minimal time and effort to achieve same effect? I can of course listen to events on Label and then change the style, but doing that for all of the widgets would be an overkill!
EDIT- More info: I am building Menu using Label, and adding that to tree
userMgmtLbl = new Label("User mgmt");
userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE);
treeItem_1 = configParentTL.addItem(userMgmtLbl);
userMgmtLbl.addClickHandler(Click logic)
One of the problems that you're running into is that Tree and TreeItem in GWT are composed of arbitrary divs, rather than ul and li as in your original html. (When indoubt you can inspect the DOM of GWT's showcase to see how the underlying widgets are created).
What this means is that your selectors, such as "#avmenu li a:hover" will no longer work.
If your navigation menu is static, your best bet is probably to use GWT ui-binders, which are basically gwts templating system. If you use a HTMLPanel as your root widget, you can effectively use all your original HTML verbatim and not worry about trying to mash all the DOM elements into corresponding widgets.
A basic widget would look something like this:
NavigationWidget.java
public final class YourWidget extends Composite {
YourWidget() {
initWidget(binder.createAndBindUi(this));
}
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, YourWidget> {}
}
NavigationWidget.ui.xml
<ui:UiBinder
xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
xmlns:ui="urn:ui:com.google.gwt.uibinder">
<gwt:HTMLPanel>
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
</div>
</gwt:HTMLPanel>
</ui:UiBinder>
As an aside, in this example HTMLPanel adds a DIV of its own to the DOM, making the second div a bit redundant. Unfortunately, widgets in gwt don't have an easy way of setting the ID attribute from templates, so you're stuck with the second div unless you want to switch your #avmenu selector to .avmenu
Post how you are building menu in GWT. You are probably not using anchors inside your labels so your :hover styles are obviously not working.