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.
Related
Currently, I have a box which has some text inside it. Currently, the link is only applied to some text as below:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<div class="box">
<h3>Free delivery worldwide*</h3>
<a href="#">
*More info here
</a>
</div>
</div>
This is how it appears on the site:
https://snag.gy/sbC421.jpg
However, I want the whole link placed in the whole box and as with HTML I just place the tag inside the tag but I seem to lose all the styling and the padding goes I think? Code:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<a href="#">
<div class="box">
<h3>Free delivery worldwide*</h3>
<br/>
*More info here
</div>
</a>
</div>
This is how it looks after:
https://snag.gy/KZzSUv.jpg
Any help is greatly appreciated!
I think you are referencing the .box div using a css selector that requires the parent element to be a div
so you might have to change the css for the box element to something like
a > .box {
/* styles */
}
check this image for more info
Decided to do it with JavaScript inside using the below for the parameters of the div tag:
onclick="document.location='#'"
This solution is neater for what I am after and as I am using several style sheets it was difficult to spot the culprit.
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 trying to make a UI layout with 100% height using flexbox. The problem is, this is an Angular 2 app so elements are added in that I don't really have any control of.
Here's my demo. As you can see, inside each .tab div (which you can think of like a page) there is another div that is hidden programatically. When this inner div is hidden, I would like the parent div to be effectively hidden as well, allowing the visible .tab to take up the entire remaining height.
<div class="foo">
<header>A</header>
<main>B</main>
<nav>
<div class="tab">
<div style="display: none;">Foo</div>
</div>
<div class="tab">
<div>Bar (I want this at the top)</div>
</div>
<div class="tab">
<div style="display: none;">Baz</div>
</div>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
My HTML isn't really flexible because of the way Angular 2 components work. How can I achieve my desired behavior?
Use directives as:
*ngIf, *ngClass, *ngStyle
To control style and visibility in DOM.
<div *ngIf="isActive === first" class="tab">
<div style="display: none;">Foo</div>
</div>
<div *ngIf="isActive === second" class="tab">
<div>Bar (I want this at the top)</div>
</div>
<div *ngIf="isActive === third" class="tab">
<div style="display: none;">Baz</div>
</div>
I want to put Styles on a div in the moment when the div inherits 2 specific CSS classes.
The div allways has the CSS class .bla assigned, and inherits on click the jquery-ui class .ui-state-active. In this moment, when .bla and .ui-state-active are assigned, the div should get styled.
How can I accomplish this?
<div id="tabs">
<ul>
<li><a href="#tabs-1">
<div class="bla">
Tab 1
</div>
</a></li>
<li><a href="#tabs-2">
<div class="bla">
Tab 2
</div>
</a></li>
<li><a href="#tabs-3">
<div class="bla">
Tab 3
</div>
</a></li>
</ul>
<div id="tabs-1">
<p><strong>Click this tab again to close the content pane.</strong></p>
<p>Content 1</p>
</div>
<div id="tabs-2">
<p><strong>Click this tab again to close the content pane.</strong></p>
<p>Content 2</p>
</div>
<div id="tabs-3">
<p><strong>Click this tab again to close the content pane.</strong></p>
<p>Content 3</p>
</div>
</div>
These are tabs from the jquery-ui tabs plugin. i want to style the upper Divs (with assigned class .bla), when a Tab is active.
Should work:
.bla.ui-state-active {
/* your css code here */
}
You just need to concatenate the class names with a . (dot). So the rule just applies if all classes are present on that specific element.
Hope this helps :)
I am trying to have my sidebar at full height. I am using bootstrap for my blog and here is a sample page:
http://blog-olakara.rhcloud.com/blog/2013/12/11/welcome-to-jekyll/
I am trying to avoid that white space at the bottom of the screen and have the blue backgound till the bottom . I tried to implement the second solution mentioned in this SO question
But, it spoils the responsive nature for the webpage.
I also found some solution that recommend to modify the base of bootstrap like "row" class.. Is there a solution for bootstrap with responsive retained?
From their sample page:
<!-- Container-->
<div class="container-fluid">
<div class="row">
<!-- sidebar -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div> <!-- sidebar -->
<!-- main pane -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<p>hello world</p>
</div> <!-- main -->
</div> <!-- .row -->
</div> <!-- .container-fluid -->
You may have to tweak some settings from their custom CSS file
Add style="height:100%;" at your <html> tag. So it will be <html style="height:100%" class="js">
Add height to html tag
html {
height: 100%;
}