I am using wt-rotator carousel plugin with bootstrap. I have to place a menu on top of the carousel on the top left, in a fixed position. The menu should stay there even as the images fade in and fade out. Is there a way to do it using CSS?
Edit: added the code below.
So far just this code below. it is a bootstrap jumbotron, which has a wt-rotator carousel inside. On top of this carousel, I have to put a menu.
<div class="jumbotron">
<div class="container">
<div id="banner-container">
<div class="wt-rotator">
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>
<div class="next-btn"></div>
</div>
</div>
</div>
</div>
</div>
You can use a outside div with position absolute and z-index superior to the slider, and put that div on front of the slider.
Related
Is there a simple css code for bulma making their horizontal tabs to vertical tabs? (sample below) I just want to overwrite their css
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
I'm afraid there isn't a simple class to add in Bulma to achieve this (or at least not that I'm aware of). But since Bulma is using flexbox you can achieve a lot by simply overwriting the flex-direction.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
I also made a fiddle to demonstrate.
Very late to on this one but if it helps anyone else. I use a horizontal tile with 2 children. The first child I use a panel without a heading, just panel blocks that are anchor tags for my vertical tabs, the second child a div to put the target content of the anchor tag in. Switches to tabs on top and content on bottom at mobile breakpoint. JSFiddle
<section class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile box is-parent is-horizontal">
<div class="tile is-child is-2">
<nav class="panel datanav">
<a class="panel-block">Families</a>
<a class="panel-block">Members</a>
<a class="panel-block">Member Birthdays</a>
<a class="panel-block">Member Cars</a>
<a class="panel-block">Sponsors</a>
<a class="panel-block">Newsletter Mailed</a>
<a class="panel-block">Newsletter Electronic</a>
</nav>
</div>
<div class="tile is-child is-10 has-background-white-ter">
CONTENT
</div>
</div>
</div>
</div>
</section>
I tried to several ways to make the code below work. Now there is only one issue left and that the top-bar-title (Site Title) is having a white background when the user scrolls vertical up to the top when it should stay grey the color of the topbar. Does anybody know what is wrong?
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
<div class="top-bar-title menu-text">Site Title</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>Item 1</li>
<li>Item 1</li>
/ul>
</div>
</div>
</div>
Style your widemenu div in order to keep it from being overwritten by scrolling upward. Here is your menu div with the height added. You could also add that style in your css file.
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%;height:50px;">
Good luck!
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
I'm working on a jQuery mobile app and was wondering if anyone could help with button alignment within a list divider. Here is a link to a jsFiddle I created showing the button next to the text. I was wondering if it was possible to align the button to the right. I've tried adding a div around the button with a style of style="text-align: right;", but that pushes the button down like this, which I don't want.
Is there anyway to keep the text and the button on the same line, with the button aligned to the right? Any help is appreciated.
you could do it by using a 2 column layout grid, see jsfiddle
code:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">
<div class="ui-bar ui-grid-a">
<div class="ui-block-a" style="margin-top:10px;">List Header</div>
<div class="ui-block-b" style="text-align:right;">Add</div>
</div>
</li>
<li>List item 1</li>
</ul>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
screenhsot:
I have this problem with an aligning issue. I am building this responsive site using twitter bootstrap and my client wants me to align bottom some content from two different spans lik this:
He wants the grey box on the right in the right span4 to align bottom with the flexSlider on the left in the other span4. How can this be achieved? i cant use margin on the right side since the upper content is dynamic and can be much longer. i have tried using a relative positioned wrapper and absolutely positioned it but thet width of the grey box and everything gets all messed up when trying to resize the browser window to a smaller size..Any other way to go besides absolute positioning?
Here is the markup:
<div class="span8">
<div class="row section professionIntro">
<div class="span4">
<div class="flexslider section">
<ul class="slides">
<li>
<img src="img/slide1.png" alt="slide 1" />
</li>
<li>
<img src="img/slide2.png" alt="slide 2" />
</li>
<li>
<img src="img/slide3.png" alt="slide 3" />
</li>
</ul>
</div>
</div>
<div class="span4">
<p class="intro">Som dataingeniør jobber du med systemutvikling og drift av maskiner eller systemer.</p>
<ul class="infoExpand">
<li class="expandVideo">
<h2 class="videoSign">Video dataingeniøren hverdag</h2>
</li>
</ul>
</div>
</div>
Appreciate any help..
Add css responsive:
http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css
If is button position:absolute is converting position:static;
.videoSign {
position : static;
bottom:auto;
top:auto;
left:auto;
right:auto;
}
Example: http://jsfiddle.net/sEryj/