Center logo in div and navigation to right

Report · Nov 18, 2017

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.

Report · Nov 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

Report · Nov 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.

Report · Nov 18, 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, the only real Dreamweaver alternative.

Report · Nov 18, 2017

This is responsive with the help of Bootstrap 3.7

<!doctype html>

<head>

<title>Bootstrap 3.3.7</title>

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

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span>

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

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

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

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

</ul>

</div>

</div>

</nav>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 24, 2017

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!

Adobe Community

Center logo in div and navigation to right

1 Correct answer