Skip to main content
JulesN7344009
JulesN7344009
Known Participant
November 18, 2017
Answered

Center logo in div and navigation to right

  • November 18, 2017
  • 1 reply
  • 2144 views

How can I center a logo within a div, and make the navigation in the same div to sit to the far right?

Thanks in advance.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    This is responsive with the help of Bootstrap 3.7

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <style>

    .navbar { min-height: 100px }

    .brand-centered {

    display: flex;

    justify-content: center;

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

    }

    .navbar-brand {

    display: flex;

    align-items: center;

    padding: 0;

    height: 100px;

    }

    .navbar-brand>img {

    height: 100%;

    width: 100%;

    }

    .navbar-toggle { z-index: 1; }

    /* Special Rules for Medium+ devices*/

    @media only screen and (min-width: 766px) {

    .navbar-nav > li > a {

    padding-top: 40px;

    padding-bottom: 40px;

    }

    }

    </style>

    <body>

    <nav class="navbar navbar-inverse">

    <div class="container-fluid">

    <div class="navbar-header">

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <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="brand-centered"> <a class="navbar-brand text-hide" href="#"><img class="img-circle" src="https://dummyimage.com/400x400/0866a2/fff.png.jpg" alt="...">Brand Name Here.... </a> </div>

    <div id="navbar" class="navbar-collapse collapse">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Search</a></li>

    <li><a href="#">Contact</a></li>

    </ul>

    </div>

    <!--/.nav-collapse -->

    </div>

    <!--/.container-fluid -->

    </nav>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap 3-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    1 reply

    ALsp
    ALsp
    Legend
    November 18, 2017

    CSS Flex would be the best way to do it. You can study the code of the below page, which uses our CSS flex page building UI inside Dreamweaver, along with our priority adaptive menu:

    Test Document

    JulesN7344009
    JulesN7344009Author
    Known Participant
    November 18, 2017

    Hey Al!

    Thanks for your response.  I'm a big fan of all your DW plug-ins!  I have most of them, I think.  I took a look at your test page.  The logo has to be smack in the center of the page for the site I'm building.  Also, as you widen or narrow the page, it also needs to stay exactly in the center.   The navigation can tuck under it when it comes close to the logo.

    I thought there might be some kind of CSS I could use to do this.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    November 19, 2017

    One way is to use CSS Grid overlay. You can place the logo in the center of a full width grid column and have the navbar overlay sitting on top of it. Using media queries, you will then be able to place the overlay underneath the logo.

    Have a look at https://gridbyexample.com/examples/ in particular Layering Items and Implicit Named Grid Lines

    Please be reminded that CSS GRIDS will not display properly on older browsers, in particular IE.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices