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.
Related
Is it possible to apply a class or a custom style to make a white nav drop down menu look like this gradient tooltip from bootstrap, http://www.bootply.com/68688 (hover over the link) instead of taking the plain old white background?
If so how can this be accomplished?
It's a little hard to understand the question, but I think that if I'm on the same page with you, you want the nav's dropdown to be with any other color instead of white.
I would definitively suggest here that when something doesn't ship with bootstrap it doesn't mean you can't extend it with your own stylesheet.
Make sure you add your styles at the bottom of all the other styles (preferably in a new stylesheet so you don't modify the stock bootstrap files).
Here's a Fiddle of the dropdown with black instead of white.
jsFiddle: Demo
Notice how I added .mainNav to the <ul class="nav nav-tabs"> in order to have a specific hook to this navigation in case you don't want your styles to cascade to all the drop down's on your site.
The main thing here is to remember that just because it doesn't ship stock with bootstrap doesn't mean you can't extend it... it's good to try to look for stock, but if you can't find it then make it, and make it so in an organized way.
Last but not least, I think it's also note worthy to say that, yes... There are some cases where you can use the .navbar-inverse class (such as to make a black navbar) or in buttons .btn-inverse, but in this particular case I don't think that bootstrap ships with anything that will let you invert the color for that specific element.
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.
I have a really big headache, with my pure css dropdown menu - it doesn't work on any browser.
The problem is with my second level list (subnav) - when i hover over first level(#n) links, it works just fine and displays subnav, but when i try to hover over that list(list items (links)) it rapidly disappears, and i can't select second level links and navigate.
Here is my jsFiddle.
What should i add to my css, to make it work?
Thanks for your time!
You mustn't have an empty space between the top-link and its submenu. Try to use paddings instead of margins.
I am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.
Please check out the nav here:
http://cafemeetup.com/testArea/nav/
If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it.
This is not true as I have made the z-index of the rollover box lower in the stacking order.
What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.
It is done here at Shopify:
http://www.shopify.com/ (rollover 'resources')
Anyway, hope someone can shed light on this.
I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.
Anyway, thank you for at least reading all this. I appreciate your time,
James
I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.
http://jsfiddle.net/sTsrb/
You are applying your z-index:999 to the <li class="menu_right"> and then applying z-index:1 to the <div class="dropdown_1column align_right"> child element. If you want it to appear underneath the <li>, make it a sibling, not a child.
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)