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
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>
Following markup is given:
<header id="main-header">
<div class="container clearfix et_menu_container">
<div class="logo_container">
</div>
<!-- .logo_container -->
<div id="et-top-navigation">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
... ...
<li id="menu-item-103" class="menu-item">
Abteilungen
</li>
</ul>
</nav>
</div>
<!-- #et-top-navigation -->
</div>
<!-- .container -->
<div class="tg-submenu">
<div class="tg-submenu__abteilungen">
</div>
</div>
<!-- .submenu -->
</header>
the #menu-item-103 gets an added class (et-hover) by the use of js, when hovering the item. Beside that the .tg-submenu should become visible when the user hovers the #menu-item-103. Can this be achieved by css (eventually in connection of the added class et-hover on the li element) or is additional javascript required for this solution?
No, it is not possible with CSS. You need JS for this task. CSS is limited with things like :hover, :active, :focus pseudo-classes. It also have + and ~ combinators, which can be used together with pseudo-classes, but it still less powerful then JS, and isn't helpful in your specific case.
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
I'm trying to tweak an existing Twitter Bootstrap navigation bar to include a sign-out item, which is implemented as a form:
<div class='navbar'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><form >Sign Out</form></li>
</ul>
</div>
</div>
The logout link gets rendered differently than the rest of the navigation items. I'm sure this is a simple fix for someone knowledgeable in Twitter Bootstrap, but I'm pretty lost and would appreciate a push in the right direction.
I have a JSFiddle demonstrating the issue here.
The <form> tag is disrupting the bootstrap CSS if you inspect the bootstrap code you can see the selector for the a styles are only targeting direct descendants of the <li> in the nav
.navbar .nav > li > a
I am not sure the indended application of the form is but a real easy fix is to wrap the entire navbar with the form.
<form>
<div class='navbar'><div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li>Sign Out</li>
</ul>
</div>
</div>
</form>
Try This
<li>Sign Out</li>
remove the form tags
Check here JSFiddle
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/