I want to the class dropdown invisible. dropdown will be used only for specific li tags. I tried this, but it doesn't work:
.dropdown{
display:none;
}
Is there a way to make this work? Am I doing something wrong in my CSS?
HTML:
<div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
page
<ul class="dropdown-menu">
<li>page1 </li>
<li>page2 </li>
<li>page3 </li>
<li>page4 </li>
<li>page5 </li>
</ul>
</li>
<a id="Homepage" class="navbar-brand" href="somepage.com">
<img src="/images/aGif.gif?v=24820" alt="someotherpage.com" border="0">
</a>
</ul>
</div>
My best guess is that it is a specificity issue. That is, .dropdown selector is not detailed enough to override other selectors that come with Bootstrap. Make the selector more specific (i.e., #MainNavigation.nContainer[name = "MainNav"] > .nav.navbar-nav > .dropdown) and see if it works.
Related
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
When testing my website with Google Website Translator, I noticed that Google is changing the HTML structure of my page resulting in CSS styles not being applied.
For example, this piece of HTML (using Bootstrap):
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a title="About us" href="/about/">About us</a>
</li>
</ul>
Is changed into this format:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<span class="notranslate" onmouseout="_tipoff()" onmouseover="_tipon(this)">
<span class="google-src-text" style="direction: ltr; text-align: left">
<a title="About us" href="...">Over ons</a>
</span>
<a title="About us" href="...">About us</a>
</span>
</li>
</ul>
Basically, my links are being wrapped by a <SPAN>. How can I avoid that?
Update:
Google Website Translator also removes SPANs that are wrapped around SVGs, even if these elements are not a link. Very bizarre. For example:
<div>
<span>
<svg>...</svg>
</span>
</div>
Is turned into:
<div>
<svg>...</svg>
</div>
This is a native aspect of Google Translate. Best put in some CSS to fix any breakages.
I've found a fix, which is specifically targeting Google Website Translator as follows.
I've changed this:
nav > li > a {
....
}
Into this:
nav > li > a,
nav > li > span.notranslate > a {
...
}
I'm trying to get the anchor to change color on active and focus but either my syntax is wrong or the style is being overrided.
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">OTHER</p>
</li>
<li>
<p class="drops">THING</p>
</li>
</ul>
</div>
</li>
</ul>
and my css
.drop a:hover,
.drop a:focus {
background:lightgoldenrodyellow !important;
color:red !important;
}
The background changes on hover and focus because of the !important (doesn't work without that) but the color does not change. Just need to make sure I don't have some silly syntax error before looking for conflicts. If it's a conflict and there's some other trick to overide it, I'd appreciate it.
Before HTML 5, <p> was a block-level element and <a> was inline, the latter should not contain the sooner.
In other words: <a> should be inside <p>, not the opposite. Perhaps your document is not HTML 5, or at least your browser don't treat it as such. The following code works fine for me:
.drop a:hover,
.drop a:focus {
background: lightgoldenrodyellow;
color: red;
}
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">
OTHER
</p>
</li>
<li>
<p class="drops">
THING
</p>
</li>
</ul>
</div>
</li>
</div>
</ul>
I have also fixed another syntax error in your HTML code: you forgot </div> before the last </ul>.
I see no real problem but you can:
change a:focus to a:active or make sure you are including the stylesheet in your html
Hi I have an nav like this:
<nav class="navbar navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li >
Strona Główna
</li>
<li class="active" >
Legendopedia
</li>
<li >Zwoje z Sieci</li>
<li >
Zaloguj się
</li>
<li>
Zarejestruj się
</li>
</ul>
</div>
</nav>
And I want to check with CAPYBARA if the 'li' that containts '/legendopedia' link has css class: active.
If there can be only one active li in the .container div you can do it like
expect(page.find('div.container li.active')).to have_selector(:link, '', href: '/legendopedia')
which is a little backward from what you mentioned since it's checking that the li with class active has the link with the relevant href in it, but is effectively the same.
Another way would be to use xpath
expect(page).to have_xpath("//li[.//a[#href='/legendopedia']][#class='active']")
I simply want to add some additional righthand margin to the bootstrap glyphicons in an a-tag, but it won't work out. The menu looks as follows:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-open"></i>Choose project...<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Project 1</li>
<li>Project 2</li>
</ul>
</li>
<li>
<a href="#" class="btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Open layer...<input type="file">
</a>
</li>
</ul>
And the css I am trying to use is:
a > .glyphicon {
margin-right: 6px;
}
The menu looks fine, when setting the margin in the inline style and even when live-editing the site (using MagiCSS), the selector works properly. But when loading it from file, it has no effect (I checked if I am editing the proper .css-file and reloaded the browser cache already)..
Does anybody see something here? Could this be because of some bootstrap styles the glyphs inherit?
Thanks in advance for any help/advice.
Kim
Solved
Thanks Paulie_D for the tip. I could not reproduce this in JSFiddle either, but adding
i { display: inline-block; }
did the trick on my local copy!
try this instead
a > .glyphicon {
margin-right: 6px!important;
}