I typed following code. But i got underlined text. What is the my mistake?
<div class="navbar navbar-default navbar-static-top">
<div class="container">
Hi
</div>
</div>
Your text is actually a link (because it's in an <a> tag), and the CSS you are using probably says somewhere that links should be underlined. You can remove the underline by styling your link with this:
a.navbar-brand {
text-decoration: none;
}
The thing the Bootstrap navbar uses the listelement to make a list of items like links to make a button in the navbar of it.
In your case:
<div class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li>
Hi
</li>
</ul>
</div>
would do the trick.
I set up a JSFIDDLE to show the result
Related
I am trying to apply some styling to a sub menu item that I have designated with the class 'menu-mine', but I am unsure of the correct nesting sequence to use.
I am trying to transform part of my menu by changing the font size and ensuring it is uppercase, but am having trouble getting the nested selectors correct.
I want to apply it only to the menu heading with the class 'menu-mine' in the link. I am unable to apply the css class to any other selector as I am working with joomla. This is the (edited) version of the menu, and the CSS selector in question is in the 'OPAL' section.
<nav class="navbar navbar-mainmenu visible-md-block visible-lg-block vpf-mainmenu affix-on-scroll" role="navigation">
<div class="container">
<div class="inner-container">
<div class="collapse navbar-collapse vpf-mega-menu-container">
<ul class="nav navbar-nav vpf-menu" data-animate="slide" data-easing-open="linear" data-easing-close="linear" data-easing-time="100">
// other code
<li class="menuitem item-464 level-2 submenu col-xs-4"><a class="menu-mine" href="/index.php/en/by-stone/opal" ><span class="menu-group"><span class="menu-title">OPAL</span></span></a></li>
<li class="menuitem item-465 level-2 submenu col-xs-4"><span class="menu-title">CITRINE</span></span></li>
</ul>
</div>
</div>
</div>
</nav>
This didn't work.
.navbar-mainmenu .navbar-nav li.level-2 > a.menu-mine, .navbar-mainmenu .navbar-nav li.level-2 a.menu-mine span.menu-group > span {
font-size: 14px;
text-transform: uppercase;
}
The expected outcome is that the menu header 'Opal' will be in uppercase and the specified font size.
It looks like you just need to include first-of-type. I've added it to your declarations without suggesting any other modifications. I've added color: red to make the output clearer to researchers.
.navbar-mainmenu .navbar-nav li.level-2:first-of-type a.menu-mine,
.navbar-mainmenu .navbar-nav li.level-2:first-of-type a.menu-mine span.menu-group > span
{
font-size: 14px;
text-transform: uppercase;
color: red;
}
<nav class="navbar navbar-mainmenu visible-md-block visible-lg-block vpf-mainmenu affix-on-scroll" role="navigation">
<div class="container">
<div class="inner-container">
<div class="collapse navbar-collapse vpf-mega-menu-container">
<ul class="nav navbar-nav vpf-menu" data-animate="slide" data-easing-open="linear" data-easing-close="linear" data-easing-time="100">
<li class="menuitem item-464 level-2 submenu col-xs-4"><a class="menu-mine" href="/index.php/en/by-stone/opal" ><span class="menu-group"><span class="menu-title">OPAL</span></span></a></li>
<li class="menuitem item-465 level-2 submenu col-xs-4"><span class="menu-title">CITRINE</span></span></li>
</ul>
</div>
</div>
</div>
</nav>
I have a simple bootstrap 3 scrollspy problem where the 'active' li tag is not getting activated when I scroll up/down the page. Everything else about the scrollspy works as expected.
I have seen all other stack overflow question regarding this and experimented in jsfiddle for about two hours with no progress.
Using dev tools and setting and li to :active manually shows the desired effect.
HTML
<header>
<nav class="navbar navbar-default navbar-fixed-top" id="spy-navbar">
<div class="container text-center">
<ul class="nav navbar-nav inline">
<li> ONE </li>
<li> TWO </li>
<li> THREE </li>
<li> FOUR </li>
</ul>
</div>
</nav>
</header>
<main class="container">
<article id="one">one</article>
<article id="two">two</article>
<article id="three">three</article>
<article id="four">four</article>
</main>
</body>
CSS
li > a:hover,
li:active {
border-bottom: 2px solid #2d9fff;
}
My jsfiddle link is located here:
https://jsfiddle.net/hswg5j3q/
Can anyone check out my jsfiddle and see what I am missing? Many thanks in advance.
It's because your fiddle doesn't include bootstrap.js. The JS is needed for the ScrollSpy component.
Working on Bootply:
http://bootply.com/wJHL1Vqpdi
I'm using the latest twitter Bootstrap (non-modified). The below HTML produces different result in IE and Firefox:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Test</p><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>
</ul>
</div>
</div>
In IE the icon (or font, the icons are fonts now days) is rendered properly after the text "test" on the same line. In Firefox the icon is rendered below the text. I would like both to render the icon on the same line. Anyone knows what is going on?
The short answer is: IE is doing it wrong.
In your <li>, you have 2 block elements, a <p> and an <a>. Block elements form blocks, therefore if you want them inline, either change them to inline-block, or if the menu items are unrelated, i.e. Test goes somewhere different than the refresh icon, put them each in their own <li>, like so:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Test</p></li>
<li><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>
</ul>
</div>
</div>
Note from comment: <a> tags are normally inline, but twitter bootstrap css specifically sets the <a> tag in the <nav> under <li> to block. .nav>li>a {display: block;}
I'm building a rails app right now using bootstrap for the UX. I need help figuring out how to keep the container class from appearing under the navbar. This is what the html for the page looks like:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<span class="pull-right"> Title text goes here </span>
</div>
</div>
</header>
<div class="container">
<%= yield %> <br / >
</div>
The only CSS on the page is css from bootstrap.
look at bootstrap samples, maybe you need to add style for the body:
body {
padding-top: 40px;
}
Any particular reason you need the div with the "container" class inside of the "navbar-inner" div? I would suggest changing the class of that to "brand", ditching the span, and putting your title text inside that brand div, like so:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="brand pull-right">Title text goes here </div>
</div>
</header>
Bootstrap can be picky about how various classes are nested and you should follow the same structure as outlined in the documentation:
http://twitter.github.io/bootstrap/components.html#navbar
Using twitter bootstrap, I am trying to create a sidebar in a master-detail UI with the code below. The problem is that the sidebar is always appearing right above the main content or details section as shown in the image below. Any suggestions on fixing this will be helpful. thanks.
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span9 well">
</div>
</div>
</div>
This is the only custom CSS used:
body{padding: 60px 10px 10px 10px;}
Solved
What caused my problem was that, my <div class="container-fluid"> was not wrapped with an outer row class eg <div class="row-fluid">. Once I did that, everything was fine.
Your missing a closing quote here:
<ul class="nav nav-list span3 well pull-right>
Twitter Bootstrap now provides examples, which contain a Master/Detail template. There's no need for pull-right or the the quote hack. Here's adaam's example with the hack removed, working perfectly: http://jsfiddle.net/2Zy6D/
As well as Kevin's fix:
<ul class="nav nav-list span3 well pull-right">
Based on the unknown that you might have other code effecting the width of the divs causing them to sit on top of each other use a lower span number to compensate like this (span numbers must add up to the Bootstrap maximum of 12 i.e. 9 + 3 in your code above [under normal circumstances would work]):
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span8 well">
</div>
</div>
</div>
Wouldn't usually advise this as it's not strictly correct but as this is just for a backend page it seems it will be O.K. So here's a jsFiddle (bit hacky but oh well): http://jsfiddle.net/7MD6m/