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.
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" crosso
...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:
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.
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.
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>
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!