I have a little problem when i try to minimize the page and make it small
all is well except that the navbar control moves up and i don't understand where is the problem
Here is the code and it is the same in several tutorial :
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<p class="navbar-text pull-left">
Site Realiser par Hoffmannew
</p>
<a href="http://youtube.com" class="navbar-btn btn-danger btn pull-right" >Suiver Nous sur Youtube</a>
</div>
</div>
</div>
and also the screenshot :
Related
This is the code I have for my navbar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-left previous_page" style="display:inline-block">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center" id="progress-bar" style="display:inline-block">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-right next_page disabled" style="margin-right:0px;display:inline-block">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
On Safari on iPhone 7, 8, X devices, when you FIRST load the page, the navbar appears on 2 different lines like so:
Then, when you refresh or reload it, it appears normal like so:
I'm having a really hard time figuring out how to get it to always appear normal, and am even more boggled by why a secondary page load corrects the issue.
Note, I added display:inline-block to all 3 navbar elements to try to correct this problem. It's done something... BEFORE I added it, when it was just Bootstrap native styling, on the Safari and iPhone 7, 8, X devices, even refreshing wouldn't help, and the navbar would stay split on 2 rows.
I am using Bootstrap 3.3.4
I go through this i found this solution rather than giving it inline you can use bootstrap class checkbox-inline which will make the center div inline and give navbar text-center class. Use pull-left and pull-right instead navbar-left and navbar-right. Hope it will help you :)
<nav class="navbar navbar-default navbar-fixed-top text-center" style="background: red;">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-left previous_page">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center checkbox-inline" id="progress-bar">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-right next_page disabled">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
I had the same problem. I solved it by fixing the height of the navbar. Try giving the navbar a fixed height: i.e
.container_navbar{ height: 60px; ... }
The fixed height works across all devices.
Hope this works for you
Best regards
Building a website with Laravel5 and Bootstrap4.
I'm getting a FOUC with a brief width of my page at 1/5 of width before expanding to real width.
The reason seems to be attached to how i use container-fluid.
I am using 'container-fluid' as i want to have a vertical left sidebar with content at the left of main page.
On a simple page, code is as per below :
<div class="container-fluid px-0">
<div class="d-lg-flex flex-lg-row justify-content-center ">
#yield('left_side')
<div class="col-12 col-lg-10 col-xl-10 custom-width">
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="card page_card" >
<div class="mx-auto" style="min-height: 70vh">
<p> example..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When removing my side-bar and using 'container' instead of container-fluid, the display is at correct width as soon as the page loads.
Correction
It is not about a width change. It seems briefly this is my side column which appears blank in the center with main page aligned vertically, before having the 2 pieces being put aligned horizontally
Addition1 - GIF of my FOUC-error
Here is an example of the FOUC:
It seems the FOUC is caused by my 'Google Ad'-div (in Yellow) i have inserted in my topbar containing my navbar. Some website have their ads appearing above the navbar so this can be done. Any clues?
<!-- for navigation and title on screen < lg -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-lg-none">
<div class="container">
<div class="row" >
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsMain">
<ul class="navbar-nav mr-auto" style="width: 200px">
<li class="{{Request::is('/') ? 'active' : ''}} nav-item">
<a class="nav-link">AAA </a>
</li>
<li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
<a class="nav-link" >BBB</a>
</li>
<li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
<a class="nav-link" >CCC</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="top-bar d-lg-none">
<hr class="divider-under-title mt-0 d-lg-none" />
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="top-ad d-none d-sm-block">
<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top-ad2 when removed, FOUC disappears -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-66666"
data-ad-slot="44444"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async defer>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12">
<!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
<div class="ad_block_message_id">
Oh nasty adblocker. <i class="em em---1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- for market segment on screen >= lg -->
<div class="top-large-bar d-none d-lg-block">
<!-- for Title on screen >= lg -->
<div class="row">
<div class="col-lg-12">
<h1 id="title" class="d-none d-lg-block">
<a class="deco-none" href="/">TEST</a><sup><code class="code_sup_text"></code></sup>
</h1>
</div>
</div>
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="top-ad d-none d-sm-block">
<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top-ad2 when removed, FOUC disappears -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-666666"
data-ad-slot="444444"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async defer>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12">
<!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
<div class="ad_block_message_id">
Oh nasty adblocker. <i class="em em---1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- for navbar on screen >= lg -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-none d-lg-block mb-2">
<div class="container">
<a class="navbar-brand" href="/">{{ config('app.name') }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsMain">
<ul class="navbar-nav mr-auto">
<li class="{{Request::is('/') ? 'active' : ''}} nav-item">
<a class="nav-link" >AAAA <</a>
</li>
<li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
<a class="nav-link" >BBBBB</a>
</li>
<li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
<a class="nav-link" >CCCCC</a>
</li>
</ul>
</div>
</div>
</nav>
It sounds like that you have something else going on, on your site that is causing the FOUC - and that it doesn't have something to do with the styles. Your styles looks fine to me.
If it were the styles that were the problem, then it would be because the HTML was loaded before the stylesheet was loaded. So unless you have your stylesheet in the footer, then I don't think that's the problem.
My best guess is that you have some Javascript doing something to the content that is being yielded in the left-column, - and that that isn't completed when the page is loaded. If so, - then you could work your way around it by adding a placeholder in your JavaScript until the content is loaded, - or to setup a preloader on your entire site.
In order to prove/disprove this theory, you could remove all scripts from your site and just insert som standard HTML in the left-column (temporarily), to see if that is loaded without the FOUC.
Answer to your edit (and GIF)
Thanks for the elaboration.
The first thing I'm seeing is, that you have content for < lg content and >= lg content. I wouldn't do that. Just have it once and modify it, whenever the browser-size changes. It's easier to maintain and will get you less errors. Also (currently) you have data-target="#navbarsMain" twice.
But here's the code that is giving you problems:
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
<div class="col-12">
#include('inc.ad_block_message')
</div>
</div>
</div>
I don't know what is happening in #include('inc.ad_top'). But if that is pulling some content, upon the page is loading, then that can be the root of the problem, since that content isn't pulled until after that page is loaded. And in that case, it would just display a blank col-12-container (0px height).
To debug you can change this:
<div class="col-12">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
to this:
<div class="col-12" style="min-width: 500px; width: 100%; min-height: 500px; height: auto; display: block; overflow: hidden;">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
... and see what that will get you.
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 have used the sticky footer in Bootstrap .. An example of which is
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site built by this</p>
<a class="navar-btn btn-danger btn pull-right">Subscribe on Youtube</a>
</div>
</div>
But I want to use the normal footer.. So that I can only see that when I scroll to the bottom and not always.. How can I do that with the existing code in Bootstrap?
Thanks
Use navbar-static-bottom and a container-fluid inside like this..
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p class="navbar-text pull-left">Site built by this</p>
<a class="navar-btn btn-danger btn pull-right">Subscribe on Youtube</a>
</div>
</div>
http://www.bootply.com/sa1xW9fyTW
I am using Bootstrap + Bootstro but can't make the top navbar to get behind the overlay.
http://jsfiddle.net/NJsYw/5/ (click on Tutorial)
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#" id='tutorial'>Tutorial</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
</div>
<p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p class="bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='1'>Back to the sticky footer minus the navbar.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
Looks like this was address here https://github.com/clu3/bootstro.js/issues/15 but I didn't know how to apply (if it is necessary)
Thanks
This can be done using CSS the key is z-index which specifies the stack order of an element.
The bootstrap navbar has a z-index of 1030 so in order for the bootstro backdrop to cover the navbar you need to adjust the z-index to be higher than 1030.
e.g.
.bootstro-backdrop
{
....
z-index: 2000;
}
You also need to make sure that the bootstrap popover is not covered so you need to increase its z-index to be higher than 2000.
.popover {
z-index:2001;
}
FIDDLE