I am working on a top banner with Bootstrap and my condensed menu always is wrapping to a new line for 1024x768. This is working well for resolution greater than 1024x768. Please advise in correcting my html so that the banner stays fixed on the top for 1024x768 resolution.
The banner text has to be centered, the logo should be on the left and logged in user name should be on the right.
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
<div class="navbar-header navbar-brand">
Application Title on Banner Goes Here
</div>
<div class="navbar-nav nav navbar-right">
<button class="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name">
Welcome loggedInUser
</span>
</button>
</div>
</div>
Does this look good to you?
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="container">
<div class="row w-100 justify-content-md-around row-cols-3">
<div class="col-lg-auto">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div>Application Title on Banner Goes Here</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div class="navbar-nav nav navbar-right">
<buttonclass="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name"> Welcome loggedInUser </span>
</button>
</div>
</div>
</div>
</div>
</div>
Related
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.
I'm working on making a site, and im currently dealing with BS4.1.3
I'm still new to this world so i have this issue right now:
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-4">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
</a>
</div>
<div class="col-md-4">
Test
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
But the end result it's like this
While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar
Also the bottom search bar should be the same width as the container, so full lenght
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-8 pull-right">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
<span>Test</span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
.collapse input{
width:100%;
}
I am on mobile Stack Overflow app hence not able to test this.
In Bootstap 4, to put the test at the right of the navbar you can try,
<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>
Also for aligning the blue button (The button you are using here is called as hamburger, remember that) can be aligned by using some margin-top for it.
Just use a CSS selector to select the hamburger and give some margin-top property to it.
Please consider adding a codepen so that we mobile users can play around with your code.
I want to add two logos to my bootstrap navbar, but I also want them to be responsive (i.e. I want them to get smaller, not stacked when I decrease the screen size). Here's the navbar code I have been working on-
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" src="img/image.png">
</a>
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="img/image2.png">
</a>
</div>
</div>
</nav>
Any help would be greatly appreciated!
I have created the example of having two logo side by side.
Please check the working example at CODEPEN
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav-header">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="http://www.kratosuk.com/wp-content/uploads/2013/07/joomla-logo.png" class="img img-responsive">
</a>
</div>
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" class="img img-responsive" src="http://www.kratosuk.com/wp-content/uploads/2013/07/drupal-logo.png">
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
CSS:
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
I hope it helps you
Enjoy :)
The 'img-reponsive' class should help you.
<img alt="Brand" id="brand1" src="img/image.png" class="img-responsive">
Hope it helped 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'm trying to fit my navigation bar in a single row. However when the window is less than 768px (tablet size), my last icon would be pushed to the next line. How can I fit them in a row?
Here's my JS:
https://jsfiddle.net/whywymam/dyreb439/
My HTML code:
<div class="container">
<div class="upperRow">
<nav class="navbar-header logoFw">
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-6">
<img src="image/logo.png" class="img-responsive">
</div>
</nav>
<div id="btnTopInline">
<ul class= "nav navbar-nav navbar-right hidden-xs">
<div class="col-sm-3 col-md-4 col-lg-3">
<li>
<div class="indivColl">
<a href="signupLogin.php">
<img src="image/jobseekerlogo.png" class="indi">
<p class="indit">Job Seeker</p>
</a>
</div>
</li>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<li>
<div class="empColl">
<a href="signupLoginEmp.php">
<img src="image/employerlogo.png" class="emp">
<p class="empt">Employer</p>
</a>
</div>
</li>
</div>
<div class="clearfix visible-md-block"></div>
</ul>
</div><!-- end btnTopInline -->
<div class="col-xs-3 col-xs-push-4">
<button type="button" class="btn btn-login visible-xs">
<a href="signupLogin.php">
Job Seeker<br>Log In
</a>
</button>
</div>
<div class="col-xs-3 col-xs-push-4">
<button type="button" class="btn btn-login visible-xs">
<a href="signupLoginEmp.php">
Employer<br>Log In
</a>
</button>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="clearfix visible-lg-block"></div>
</div>
<div class="middleRow">
<div class="col-sm-12 col-md-12 col-lg-12">
<nav class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-collapse collapse-in" id="nav-collapse">
<ul class="nav navbar-nav center-block">
<li>Home<img src="image/home.png" class="hidden-xs" width="75" height="65" alt="" title="" /></li>
<li>About<img src="image/about.png" class="hidden-xs" width="75" height="65" alt="" title="" /></li>
<li>Prove Your Worth<img src="image/PYW.png" class="hidden-xs" width="75" height="65" alt="" title="" /></li>
<li>Job<img src="image/jobs.png" class="hidden-xs" width="75" height="65" alt="" title="" /></li>
<li>Resources<img src="image/resource.png" class="hidden-xs" width="75" height="65" alt="" title="" /></li>
</ul>
</div>
</nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
</div>
</div> <!-- end middle row -->
</div><!-- end container -->
Are you sure you want those titles inline with the pictures? because that's what's pushing your item out. If you'd just put the titles between tags (like <h3>Home</h3> etc), you should be all right.
To keep them inline, put them in tags anyway, float the tags (with float:left or (better) display:inline-block) and then give the tag some max-width that keeps the total width contained.
Well you can go and design two seprate menus one for small screen sizes and the other for normal screen sizes
This could be done easy while using style sheets and adding a max. Size
In the style sheet of the small screens make the big menu hidden and do the opposite on the other style sheet
You can but the menu in a div to hide it faster
You can design it fastly on adobe dreamweaver
Hope this helps