I just started using Bootstrap, and I'd like my sidebar to move in between rows when the screen-size is xs.
So on normal screen sizes, the format would look like this:
AAAAAAAA | BBBB
CCCCCCCC | BBBB
And on smaller screen sizes, the format would be
AAAAA
BBBBB
BBBBB
CCCCC
I'm having trouble arranging my div boxes around in a way that would work. Sidebar B is several lines long so if I make Text C into another row, there would be a lot of empty space between Text A and Text C, which is not what I want.
Is there a way for me to insert my sidebar between Text A and C?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" style="margin-top: 1em;">
<div class="col-md-8">
<div class="row">
<div class="col-md-3 col-xs-12" style="text-align: center;"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-4 col-xs-12">
<span class="trackField">Title:</span> ice<br>
<span class="trackField">Producer:</span> whoo<br>
<span class="trackField">Lyricist:</span> eau.<br>
<span class="trackField">Other Credits:</span>
<span class="nobr">eau. <span class="whisper">(direction, video)</span>,</span>
<span class="nobr">笹篠 <span class="whisper">(art)</span></span></div>
<div class="col-md-5 col-xs-12">
<span class="trackField">Official Broadcasts:</span>
<span class="nobr"><a href="http://www.nicovideo.jp/watch/sm15920143">
<img src="/images/icons/niconico.png" class="favicon"></a>
<a href="http://kkbox.fm/Fs0svB">
<img src="/images/icons/kkbox.png" class="favicon"></a></span> <br>
<span class="trackField">Commercial Links:</span>
<span class="nobr"><img src="/images/icons/amazon-us.png" class="favicon"> <img src="/images/icons/amazon-jp.png" class="favicon"> </span><br>
<span class="trackField">Unofficial Links:</span>
<span class="nobr"><img src="/images/icons/hmiku-wiki.png" class="favicon"> <img src="/images/icons/vwiki.png" class="favicon"> <img src="/images/icons/vocadb.png" class="favicon"> <img src="/images/icons/utaitedb.png" class="favicon"></span>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> ice - オケ <span class="whisper">(karaoke)</span>
</div>
</div> <!-- Other Downloads -->
</div>
<div class="col-md-4" style="border: 1px solid red;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align: center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9">
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript>【ニコニコ動画】【Faeri】ice【歌ってみた】</noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p><strong>Base translation:</strong> Tatenia and tenkail<br>
Notes:<br>
<br>This is actually for a college assignment! I referenced unreliable translations, please consider these lyrics as more as an “adaptation”.<br>
It was really difficult to sing this! I don’t think I’ll sing the original Japanese version at the moment. The karaoke included a bit of Miku’s chorus, and unfortunately, I couldn’t remove it.</p>
</div> <!-- Media Sidebar-->
</div>
<div class="row">
<div class="col-xs-12">This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. </div>
</div>
</div>
Insert C texts inside the col-sm-8 like following
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" style="margin-top: 1em;">
<div class="col-md-8">
<div class="col-md-3 col-xs-12" style="text-align: center;"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-4 col-xs-12">
<span class="trackField">Title:</span> ice<br>
<span class="trackField">Producer:</span> whoo<br>
<span class="trackField">Lyricist:</span> eau.<br>
<span class="trackField">Other Credits:</span>
<span class="nobr">eau. <span class="whisper">(direction, video)</span>,</span>
<span class="nobr">笹篠 <span class="whisper">(art)</span></span></div>
<div class="col-md-5 col-xs-12">
<span class="trackField">Official Broadcasts:</span>
<span class="nobr"><a href="http://www.nicovideo.jp/watch/sm15920143">
<img src="/images/icons/niconico.png" class="favicon"></a>
<a href="http://kkbox.fm/Fs0svB">
<img src="/images/icons/kkbox.png" class="favicon"></a></span> <br>
<span class="trackField">Commercial Links:</span>
<span class="nobr"><img src="/images/icons/amazon-us.png" class="favicon"> <img src="/images/icons/amazon-jp.png" class="favicon"> </span><br>
<span class="trackField">Unofficial Links:</span>
<span class="nobr"><img src="/images/icons/hmiku-wiki.png" class="favicon"> <img src="/images/icons/vwiki.png" class="favicon"> <img src="/images/icons/vocadb.png" class="favicon"> <img src="/images/icons/utaitedb.png" class="favicon"></span>
</div>
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> ice - オケ <span class="whisper">(karaoke)</span>
</div>
</div>
<div class="col-md-4 pull-right" style="border: 1px solid red;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align: center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9">
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript>【ニコニコ動画】【Faeri】ice【歌ってみた】</noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p><strong>Base translation:</strong> Tatenia and tenkail<br>
Notes:<br>
<br>This is actually for a college assignment! I referenced unreliable translations, please consider these lyrics as more as an “adaptation”.<br>
It was really difficult to sing this! I don’t think I’ll sing the original Japanese version at the moment. The karaoke included a bit of Miku’s chorus, and unfortunately, I couldn’t remove it.</p>
</div> <!-- Media Sidebar-->
<div class="col-md-8">This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. </div>
</div>
</div>
You may also use latest version of Bootstrap and utilize flex order classes to set the sequence of columns on different devices.
Check out the link below:
https://getbootstrap.com/docs/4.3/layout/grid/#reordering
Related
I'm coding a page that uses nested bootstrap columns. I am using push/pull to have the columns switch places on mobile, and it's working great. However, on desktop I've got some odd spacing issues. The nested columns are offset to the right of the parent column.
I've set up a fiddle that shows this behavior. In this example, col-md-9 is the parent div. I've given it a gold background to show the behavior. When you resize the output, the nested divs flow into place as expected. Any insight to this issue would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA">
<script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text</p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="" />
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="" />
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Edit: The columns appear in the proper order on the desktop view, they are just offset for reasons I can't explain.
When you used pull and push class in bootstrap used alternate column for that So that you need to used:
col-xs-8 col-md-8 col-md-push-4 instead of col-xs-12 col-md-8 col-md-push-8
and
col-xs-4 col-md-4 col-md-pull-8 instead of col-xs-12 col-md-4 col-md-pull-4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Update Demo Link
Your large video should be
class="col-xs-12 col-md-8 col-md-push-4"
and your small video should be
class="col-xs-12 col-md-4 col-md-pull-8"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
I'm trying to get two different cards to update their active tab-pane using one nav-link.
Here is my code. As you can see, I have one card that has act info and one that has the corresponding video in it. When I click to see the other act info, I want the video to also change (at the moment there is no second video - it just says 'stuff number 2'
<div class="row pt-5" id="acts">
<div class="col-md-4 offset-md-1">
<div class="card">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#act1" role="tab">Take Five</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#act2" role="tab">Thank You For Your Consideration</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="act1" role="tabpanel">
<div class="card-block">
<h3 class="card-title">Take Five</h3>
<p class="card-text">Do you also have trouble getting out of bed? Working 9 to 5, the same routine every day.. “Take Five” is about one of those days, a light hearted piece full of absurdness and acrobatics. People of all ages can enjoy the 7- minute act, let Ida surprise you!</p>
</div>
</div>
<div class="tab-pane" id="act2" role="tabpanel">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-md-9">
<h3 class="card-title">Thank You For Your Consideration</h3>
<p class="card-text">What do you write in a letter when you apply for a job? Everybody has been there, behind a computer screen, mind blank. It sounds too pretentious or too insecure. If only they would see the real you. But if that’s a good idea.. An act about struggles that everyone has experienced, brought with humour, brutal honesty and creativity in movement. Ida’s genuine story is a 6 minute text-based circus performance.</p>
</div>
<div class="col-md-3">
<img src="" alt="TYFYC" class="img-fluid img-rounded">
</div>
</div>j
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="card">
<div class="tab-content">
<div class="tab-pane active" id="act1" role="tabpanel">
<div class="card-block">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/220114759" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="tab-pane" id="act2" role="tabpanel">
Stuff number 2
</div>
</div>
</div>
</div>
</div>
Is there a way to do this without using a javascript .addClass('active')?
I can't seem to get my pills to work on a small screen. They can tab content fine on a normal screen, but once I make the screen small, the pills are unclickable.
I don't know what the problem is.
Also if I have only the pills, then it tabs but once it's in the container, then it doesn't tab.
<div class="container-fluid">
<div class="row" style="margin-top: 1em; border: 2px dashed lightgreen">
<div class="col-md-8">
<div class="row">
<div class="col-md-3" style="text-align: center; border: 2px dotted purple"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-5" style="border: 2px dotted purple">
TEXT TEXT TEXT</div>
<div class="col-md-4 col-xs-12">
TEXT TEXT TEXT
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> ice - オケ <span class="whisper">(karaoke)</span>
</div></div>
</div><div class="col-md-4" style="border: 1px solid red; float: right;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align:center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9" ><script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript>【ニコニコ動画】【Faeri】ice【歌ってみた】</noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p>TEXT TEXT TEXT</p>
</div></div>
After re-implementing the page again and fiddling around with the columns/rows, I realized that it was a case of z-index. Oops. It wasn't obvious until I changed the bg color of the divs.
The final code I ended up with for the media sidebar was this:
<div class="col-md-4 col-lg-4 pull-right" style="background-color: #99CCFF; border: 3px dotted red; display: block; z-index: 1; margin-top: 1em;">
<!-- All that jazz and other stuff -->
</div>
And it seems to work like I wanted to. Hopefully it won't hiccup on me in the future. #NathanielFlick, apologies for not being more helpful in providing the code, but I really appreciate you taking the time to respond back to me. Thanks!
My main goal is to create a btn that play/pause the song on my wedding site.
I got it to work on the desktop view port, but not on the phone.
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this
So far so good, everything work perfectly fine.
Here come the issue, here what it look like on the 400px
I see it, but, they're not clickable at all.
I tried to inspect it, this is what I see.
I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work.
I'm a little stuck now, please feel free to give me any suggestions.
HTML
<!--Header start -->
<header>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper" id="navbar">
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music">
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
</div>
{{-- Music --}} -------------------------------------------------
<div class="container">
<!--Logo -->
<div class="logo">
<img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="logo_phone hidden">
<img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navigation">
<li class="menuItem" id="home">Home</li>
<li class="menuItem">Count Down</li>
<li class="menuItem">Couple</li>
<li class="menuItem">Events</li>
<li class="menuItem">Gallery</li>
<li class="menuItem">Accommodation</li>
<li class="menuItem">RSVP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
<!--video header start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
<!--background slide show start-->
<div class="slide into_firefly">
<!--header text1 start-->
<div class="container hedaer-inner ">
<div class=" bannerText clearfix ">
<h1>Long & Roth</h1>
<h4>WE ARE GETTING MARRIED</h4>
<p class="ruler"><span></span>
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
<span></span></p>
<h4 class="date long">July 26th, 2016</h4>
<h4 class="date short">-07.26.2016-</h4>
</div>
<p class="downArrow"><i class="fa fa-chevron-down"></i></p>
</div>
<!--header text end-->
<img src="/img/love/main/edit/retina.jpg" alt="Main Image">
</div>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
</header>
<!--Header end -->
Remove the part where you have set the logo to z-index: 9999
Then add this to your css
.navbar-header button{
float:right;
}
It is a z-index issue, but z-index is tricky and only works when the elements have a position other than static (which is default).
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
...
</div>
{{-- Music --}} -------------------------------------------------
<div class="container" style="position:relative; z-index:98">
...
</div>
(I put the styling inline for clarity)
There are likely other way to fix this, but this was the quickest.
Pull the button outside of .navbar-wrapper and put it as the first element under .menu
That'll work :)
I am using a free template to build a website. The template is great. But I realize that images are overlapping in chrome browser.
It should look like this;
but the actual situation is;
I think it is a js issue but I don't know how to solve it. How could I manage to make it working in chrome too?
Edit: Sorry to forget adding codes
<div class="container page-content">
<!-- #options -->
<div id="container" class="row portfolio-grid-textblock">
<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Mg" data-category="wordpress">
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/astrolojiler-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>ASTROLOJİLER</h5>
<p>
Burç yorumları, yükselen burçlar, çin astrolojisi, hint astrolojisi...
</p>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 element actinoid bootstrap" data-symbol="U" data-category="actinoid">
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/numeroloji-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>NÜMEROLOJİ</h5>
<p>
Sayı bilimi, aşk uyumu ve harflere karşılık gelen rakamlar...
</p>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 element lanthanoid bootstrap" data-symbol="Gd" data-category="lanthanoid">
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/fallar-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>FALLAR</h5>
<p>
Kahve falı, tarot falı, el falı, renk falı, zar falı, çiçek falı, niyet falı ve daha birçok fal...
</p>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Y" data-category="wordpress">
<a href="portfolio-item-style2.html">
<div class="image-link">
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/biyoritim-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>BİYORİTİM</h5>
<p>
Biyoritim değerlerinizi günlük olarak görmek için buraya tıklayın...
</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 element" data-symbol="B" data-category="ui-design">
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/ruya-tabirleri-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>RÜYA TABİRLERİ</h5>
<p>
Rüyanızda gördüğünüz şeyler ne anlama geliyor öğrenmek için tıklayın...
</p>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Fe" data-category="wordpress">
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/karakter-analizi-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>KARAKTER ANALİZİ</h5>
<p>
Nasıl bir karakteriniz var? Karakterinizi belirleyen etkenler nelerdir?...
</p>
</div>
</a>
</div>
</div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ae-yeni-alt -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2108313464701654"
data-ad-slot="9514974529"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Dotted line between footer -->
<hr class='dotted'/>
<footer class="below-footer">
<div class="container ">
<div class="pull-right smalllogo">
<div>
<!--<i class="fa fa-dot-circle-o"></i> SkyWay-->
</div>
</div>
<a id="scrolltotop" href="#" class="btn btn-default btn-sm"><i class="fa fa-angle-up fa-2x"></i></a>
<p>
© 2011-2015 AstroEnerji.com Kullanım Koşulları | Gizlilik Bildirimi
</p>
</div>
</footer>
<!-- End of footer -->
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="vendor/isotope/jquery.isotope.min.js"></script>
<script src="vendor/isotope/js/fake-element.js"></script>
<script src="js/site.js"></script>
You've got something screwy going on in the 4th box -- the one with data-symbol="Y"
<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Y" data-category="wordpress">
=> <a href="portfolio-item-style2.html">
=> <div class="image-link">**
<a href="portfolio-item-style2.html">
<div class="image-link">
<img alt="Reponsive Style" src="img/PortfolioImg/biyoritim-home.jpg"/>
</div>
<div class="portfolio-texbox">
<h5>BİYORİTİM</h5>
<p>Biyoritim değerlerinizi günlük olarak görmek için buraya tıklayın...</p>
</div>
</a>
</div>
**extra div here => </div>
If you take out the two lines that I put a => in front of, that should fix it.
I think you also have an extra tag at the end of that block. Remove that also.
If that doesn't fix it then we'll need to see the issue on a full html page, on bootply, jsfiddle, or your server, etc.