1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Navbar with logo and text-align right ?

Damian Dominella free asked 8 years ago

I'm using MDB to build some websites, and I really loved it. I'm new in this sector, and I can't find out how to build a navbar with logo on left and text (menu) on the right. Can anybody help me? Thanks.

Ravi Kiran free answered 6 years ago

can any one tell me how to move logo to the right side in bootstrap 4

JackZeled0n pro answered 7 years ago

For making to the right side the text you have only to change the class mr-auto to ml-auto

Edyta Dabrowska free answered 7 years ago

Eric, do you need a further investigation of this?

surface2air free answered 7 years ago

Hi @Marta, Thanks! Yes, this fixed the issue, but raises new ones unrelated to the Navbar. "Hidden" and "Visible" style classes no longer work in my project. All "hidden" content is visible across viewport breakpoints. But, on the positive tip, the Navbar is all working now across display and device viewport. I see a happy client in my future! Snoopy Dance! :] Thanks, again, for wrestling through this project and for the helpful troubleshooting on the navbar. Much appreciated! Thanks, Eric Seattle, WA

Edyta Dabrowska free answered 7 years ago

Dear Eric, I suggest not going back to earlier versions of Bootstrap and MDBootrtrap. If it comes to the always opened navbar (on small devices) please remove display: flex from #navbarNav1. Let me know if this helps. Regards,

surface2air free answered 7 years ago

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

Marta Wierzbicka staff answered 7 years ago

Hi, But you in your html file you use Bootstrap 3 CSS and JS and in the newest version of MDB we use Bootstrap v4.0.0-alpha.6 . Please use in your html file only files from MDB pack, like this: <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

surface2air free answered 7 years ago

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:

http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/KVW/nav-template-07.htm&w=480&h=800&a=24&s=1

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

Marta Wierzbicka staff answered 7 years ago

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

surface2air free answered 7 years ago

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:

http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/KVW/nav-template-02.htm&w=768&h=1024&a=22&s=1

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.
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.

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

Kamil Paciepnik free answered 7 years ago

Hi akiarostami, please share me your all code, then i will be able to recreate your problem and fix it. Regards

akiarostami pro answered 7 years ago

There is a problem with this, as this sample doesn't have mobile menu. With mobile menu this is not working right. Any suggestion?

Kamil Paciepnik free answered 7 years ago

Hi hari bhusal, Rafael Araújo gave you a sample code - thank you Rafael! Could you share me your code hari? Then I can help you with your example. Regards

Rafael Araújo free answered 7 years ago

Hi, I could manage this and float the content to the right on navbar like this: 
<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>
It is live on this site: http://pesquisaporimagem.ml/

hari bhusal free answered 7 years ago

Still I can't find a proper solution for my condition. I need "navbar-nav" and It's components are to be floated right. Can you Give me solution ?

Marta Wierzbicka staff answered 7 years ago

Hello Rafael, which version of MDB do you have? Best, Marta

Rafael Araújo free answered 7 years ago

Hi, I'm trying to make .float-right work on navbar, can you give any tip? 
<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>

Marta Wierzbicka staff answered 7 years ago

Hello, Yes, we know, we wrote information about this in changelog: http://mdbootstrap.com/changelog/. Best, Marta

Maad free answered 7 years ago

Unfortunately it doesn't work :( In bootstrap 4 pull-xx-right was replaced by float-xx-right. See: https://v4-alpha.getbootstrap.com/migration/

Michal Szymanski staff answered 8 years ago

You can use "pull-xs-left" and "pull-xs-right" classes. Take a look here to learn more about it. Working example: 
<!--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-->
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
brand-logo logo-images navbar navbar-mdb-right navigation-bar
About author
Damian Dominella
0Support score
1Questions 0Answers 0Snippets