Highlighted

Center logo in div and navigation to right

Engaged ,
Nov 18, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Center logo in div and navigation to right

Engaged ,
Nov 18, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 18, 2017 0
Mentor ,
Nov 18, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 18, 2017 0
Engaged ,
Nov 18, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 18, 2017 0
Adobe Community Professional ,
Nov 18, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 18, 2017 1
Adobe Community Professional ,
Nov 18, 2017

Copy link to clipboard

Copied

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 18, 2017 1
JulesN LATEST
Engaged ,
Nov 24, 2017

Copy link to clipboard

Copied

I'm really not familiar with Bootstrap.  I have been playing with this since you posted it.  I couldn't seem to get it to work for the site that I have already finished the main template of. 

I'd have to take a Bootstrap course for this.

Thanks for the info, Nancy!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2017 0