Topic: Navbar with logo and text-align right ?
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Logo</a>
<!--Links-->
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar-->
<nav class="navbar navbar-toggleable-md navbar-light white bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>P.G.I.C</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav float-right">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-light white navbar-flat-border fixed-top">
<div class="container">
<a class="navbar-brand smooth-scroll" href="#home" title="Pesquisa por Imagens no Google pelo Celular">
<strong> <i class="fa fa-search"></i> <i class="fa fa-plus"></i> <i class="fa fa-picture-o"></i> <i class="fa fa-plus"></i> <i class="fa fa-google"></i> <i class="fa fa-plus"></i> <i class="fa fa-mobile"></i> </strong>
</a>
<ul class="nav navbar-nav ml-auto float-right">
<li class="nav-item">
<a class="nav-link smooth-scroll waves-effect waves-light" href="#about">Sobre</a>
</li>
</ul>
</div>
</nav>
Hi @Michal, @Marta and @Kamil -
This is an issue I am tracking with @Edyta: the ability to include a small IMG Brand Logo in the Navbar. I have tried various workarounds, including this one lengthy and embellished code sample attached below, but to no avail.
Please reference the complete Support thread here:
FIXED x SCROLLABLE NAVBAR WITH LOGO: VIEWPORT BUG
https://mdbootstrap.com/forums/topic/fixed-x-scrollable-navbar-with-logo-viewport-bug/
Code sample here:
<div class=”navbar-header”>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-light fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="default.htm">
<img src="images/KVW-52-red-banner.png" id="kvw-logo" border="0" />
</a>
<div class="collapse navbar-collapse navbar-toggleable-sm" id="navbarNav1">
<!-- LARGE VIEWPORTS -->
<ul class="nav navbar-nav mr-auto visible-lg hidden-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="default.htm">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="background.htm">Background</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.htm">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="writings.htm">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.htm">Testimonials</a>
</li>
</ul>
<!-- MEDIUM VIEWPORTS -->
<ul class="nav navbar-nav mr-auto hidden-lg visible-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="default.htm">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="background.htm">Background</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.htm">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="writings.htm">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.htm">Testimonials</a>
</li>
</ul>
<!-- SMALL VIEWPORTS -->
<ul class="nav navbar-nav mr-auto hidden-lg hidden-md visible-sm hidden-xs">
<li class="nav-item">
<a class="nav-link xs-padding" href="default.htm">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link xs-padding" href="background.htm">Background</a>
</li>
<li class="nav-item">
<a class="nav-link xs-padding" href="portfolio.htm">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link xs-padding" href="writings.htm">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link xs-padding" href="testimonials.htm">Testimonials</a>
</li>
</ul>
<!-- EXTRA SMALL VIEWPORTS -->
<ul class="nav navbar-nav mr-auto hidden-lg hidden-md hidden-sm visible-xs">
<li class="nav-item">
<a class="nav-link xs-padding" href="default.htm">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item xs-padding">
<a class="nav-link" href="background.htm">Background</a>
</li>
<li class="nav-item xs-padding">
<a class="nav-link" href="portfolio.htm">Portfolio</a>
</li>
<li class="nav-item active xs-padding">
<a class="nav-link" href="writings.htm">Writings</a>
</li>
<li class="nav-item xs-padding">
<a class="nav-link" href="testimonials.htm">Testimonials</a>
</li>
</ul>
<p class="socials visible-lg hidden-md hidden-sm hidden-xs">
<a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="#" title="Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" title="Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href="#" title="Tumblr" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</p>
</div>
<!-- Menu -->
</div>
</nav>
</div>And my browser-based testing in various viewport breakpoints with Quirktools > Screenfly across desktop, table, device and other screen resolutions:
To recap: my client wanted his image logo in the Navbar and scalable across viewport breakpoint with a fixed and scrollable responsive navigation bar.
I can get the MDB Navbar up-and-running easily from the code examples, but found blocking issues with an image included in place of HTML text as well as alignment of navigation links (below the logo on smaller viewports, a collapsed navbar on smaller viewports, horizontal and vertical center alignment of navigation elements across the screen in larger displays, etc).
Please refer to these screen captures, too, from Quirktools > Screenfly:
Screenshot 01 :
Navbar in Smaller Viewports appear open and overlaps page content as a default.
Screenshot 02 :
Navbar in Medium-sized Viewports with offset vertical alignment of Nav content and Distortion of Image Logo.
Any support with this is much appreciated!
Thanks, again.
Eric,
Seattle
Hi Eric,
What version of MDB do you have? I've fixed your navbar for version MDB 4.3.2 Pro (the newsest). This is an effect you want to achieve? Look at the code and link: http://quirktools.com/screenfly/#u=http%3A//127.0.0.1%3A50854/test10.html&w=1440&h=900&a=1&s=1
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-light fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="default.html">
<img src="http://gridinteractive.com/KVW/images/KVW-52-red-banner.png" class="d-inline-block align-top" />
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<!-- LARGE VIEWPORTS -->
<ul class="nav navbar-nav mr-auto visible-lg hidden-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="default.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="background.html">Background</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="writings.html">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.html">Testimonials</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link" href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Tumblr" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<!-- Menu -->
</div>
</nav>
</header>
<!--Main Navigation-->Best,
Marta
Hi @Marta,
Thanks for assistance with this. I think it's getting closer, but the drop-down for smaller viewports does not show upon click action on the Hamburger Menu. It remains hidden.
Thanks, too, for mentioning the updates to MDB -- I have added both minified versions of the CSS and Javascript to 4.3.2.
Here's my test version up at Quirktools > Screenfly:
And source code for that file : nav-template-07.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8 /">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="robots" content="noindex, noarchive, noodp, nosnippet, nocache" />
<!-- Font Awesome | v. 4.7.0 -->
<link rel="stylesheet" href="https://use.fontawesome.com/42230e4d81.css" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />-->
<!-- Site Stylesheet -->
<link href="css/style.css" rel="stylesheet" />
<!-- Flex Masonry Columns CSS -->
<link href="css/flex-writings-masonry.css" rel="stylesheet" />
<!--<link href="css/flex-masonry-writings-cols.css" rel="stylesheet" />-->
<!--[if lte IE 9]>
<script src="masonry.pkgd.min.js"></script>
<![endif]-->
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css" rel="stylesheet" />
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css" rel="stylesheet" />-->
<link href="css/mdb.min.css" rel="stylesheet" />
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
margin-top: 3rem;
padding-top:50px;
}
@media (max-width: 1020px) {
.navbar-toggleable-sm .navbar-nav {
flex-direction: column;
}
}
.navbar {
background-color: #FAFAFA;
}
footer.page-footer {
background-color: #BDBDBD;
margin-top: 2rem;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-light fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="default.html">
<img src="http://gridinteractive.com/KVW/images/KVW-52-red-banner.png" class="d-inline-block align-top" />
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<!-- LARGE VIEWPORTS -->
<ul class="nav navbar-nav mr-auto visible-lg visible-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="default.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="background.html">Background</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="writings.html">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.html">Testimonials</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons visible-lg hidden-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Tumblr" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<!-- Menu -->
</div>
</nav>
</header>
<main>
<!--Main layout-->
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="page-header">Page Template</h4>
<p>
In times of great difficulty, we must not lose sight of our achievements. We must see the bright future ahead, and pluck up our courage.
</p>
</div><!-- /. End Column -->
</div><!-- /. End Row -->
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer links-->
<div class="container-fluid">
<div class="row justify-content-center text-md-center">
<div class="col-8 text-*-center footer-padding">
<span class="ft-dark ft-tag">Business & Association Leadership + Partnerships + Marketing & Communications</span>
<p class="socials visible-md visible-sm visible-xs hidden-lg center-on-small-only">
<a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="#" title="Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" title="Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href="#" title="Tumblr" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
<!--/.Footer links-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>-->
</body>
</html>
Thanks, again, for your support and assistance.
Talk soon.
Eric
Seattle
<script type="text/javascript" src="js/bootstrap.min.js"></script>, <link href="css/bootstrap.min.css" rel="stylesheet" /> without this <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />, <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>, because Bootstrap don't have his Alpha files on CDN. And please tell me what version of MDB do you have? You can find this in README.txt file. I need to know this to help you.
Best,
Marta
Hi @Marta,
Thanks for updating me with the latest builds for Bootstrap and MDB.
I have attached the most recent version for MDB: 4.3.2 on my host server.
In my most recent test page, I have appended the source to contain relative paths to the following server-hosted asset files:
CSS
+ css/bootstrap.min.css
+ css/mdb.min.css
SCRIPTS
+ js/bootstrap.min.js
+ js/mdb.min.js
-------
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8 /">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="robots" content="noindex, noarchive, noodp, nosnippet, nocache" />
<!-- Font Awesome | v. 4.7.0 -->
<link rel="stylesheet" href="https://use.fontawesome.com/42230e4d81.css" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />-->
<!-- Site Stylesheet -->
<link href="css/style.css" rel="stylesheet" />
<!-- Flex Masonry Columns CSS -->
<link href="css/flex-writings-masonry.css" rel="stylesheet" />
<!--<link href="css/flex-masonry-writings-cols.css" rel="stylesheet" />-->
<!--[if lte IE 9]>
<script src="masonry.pkgd.min.js"></script>
<![endif]-->
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />-->
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet" />
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css" rel="stylesheet" />-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css" rel="stylesheet" />-->
<!-- Template styles -->
<style rel="stylesheet">
/* TEMPLATE STYLES */
main {
margin-top: 3rem;
padding-top:50px;
}
@media (max-width: 1020px) {
.navbar-toggleable-sm .navbar-nav {
flex-direction: column;
}
}
.navbar {
background-color: #FAFAFA;
}
footer.page-footer {
background-color: #BDBDBD;
margin-top: 2rem;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-light fixed-top scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="default.html">
<img src="http://gridinteractive.com/KVW/images/KVW-52-red-banner.png" class="d-inline-block align-top" />
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<!-- LARGE VIEWPORTS -->
<ul class="nav navbar-nav mr-auto visible-lg visible-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="default.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="background.html">Background</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="writings.html">Writings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.html">Testimonials</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons visible-lg hidden-md hidden-sm hidden-xs">
<li class="nav-item">
<a class="nav-link" href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Tumblr" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<!-- Menu -->
</div>
</nav>
</header>
<main>
<!--Main layout-->
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="page-header">Page Template</h4>
<p>
In times of great difficulty, we must not lose sight of our achievements. We must see the bright future ahead, and pluck up our courage.
</p>
</div><!-- /. End Column -->
</div><!-- /. End Row -->
</div>
<!--/.Main layout-->
</main>
<!--Footer-->
<footer class="page-footer center-on-small-only">
<!--Footer links-->
<div class="container-fluid">
<div class="row justify-content-center text-md-center">
<div class="col-8 text-*-center footer-padding">
<span class="ft-dark ft-tag">Business & Association Leadership + Partnerships + Marketing & Communications</span>
<p class="socials visible-md visible-sm visible-xs hidden-lg center-on-small-only">
<a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="#" title="Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" title="Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href="#" title="Tumblr" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
<!--/.Footer links-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!-- MDB core JavaScript -->
<script src="js/mdb.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>-->
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
</script>
</body>
</html>
------
TEST PAGE: nav-template-08.htm
QUIRKTOOLS > SCREENFLY
http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/KVW/nav-template-08.htm&w=768&h=1024&a=22&s=1
Should I roll back to an earlier version of Bootstrap and MDBootstrap?
For now, it seems from a recent test, I can achieve the combination of an Image LOGO in the Navbar using vanilla Bootstrap. The client's desire to have it work across viewport breakpoints (XS, SM, MD, LG) at different screen resolutions seems to work.
See attached:
http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/KVW/codepen-navbar-01.htm&w=800&h=480&a=24&s=1
But there's a catch: I lose all of the MDB style for the page content. :(
My compromise is: I keep the MDB asset files included in the project, but remove the LOGO from the Navbar for Smaller Viewports by using the Helper classes to hide it (e.g., "hidden-sm", "hidden-xs"), and tack the LOGO to the page content that flows beneath the Navbar.
Thanks, again, for support and patience with this.
Talk soon.
Eric
Seattle
display: flex from #navbarNav1.
Let me know if this helps.
Regards,
For making to the right side the text you have only to change the class mr-auto to ml-auto
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No