Logo is out of alignment

Report · Mar 05, 2018

I created my website using the Dreamweaver Bootstrap tutorial. All was good until I decided to change my logo. The new logo sits lower than the original and out of alignment with my menu bar.

I've resized the new logo to exactly the same dimensions as the old logo. The new one still won't align.

No other problems inserting new photos on the rest of the website.

Any help would be appreciated.

Here's a screen capture if this helps.

Report · Mar 05, 2018

I do not see a problem with the code that I am privy to, which means that the problem could be elsewhere.

If you want us to help you, we will need to see the full code, preferably by you uploading the page, including style sheets, and giving us a URL to that page.

Wappler, the only real Dreamweaver alternative.

Report · Mar 06, 2018

Ben P:

Here's my code:

</head>

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

<li><a href="About.html">About</a></li>

<li><a href="photo_classes.html">Classes</a></li>

<li><a href="http://kacproductions.photoshelter.com/gallery-list" target="new">Stock Photos</a></li>

<li><a href="Photo_tours.html">Tours</a></li>

<li><a href="http://kathyadams-clark.pixels.com/index.html" target="new">Prints</a></li>

</ul>

</div>

</div>

Report · Mar 06, 2018

I am pretty sure based on your code that I found your website and your issue is actually present today, just not as prevalent as with your updated image. The issue is with your use of the bootstrap code. So what you have today is a container around 2 divs. There is no row for your content, nor any columns within the row. So a lot of the normal rules that bootstrap has in place are not working because the core structure is not being found. What I'm thinking you need to do is either 1 of two solutions:

Either 1. Inside your container, put a row div, and then your navbar header and navbar would be 2 columns with defined, or offset widths. So for instance, you could do col-md-8 for your logo and col-md-4 for your navbar or col-md-4 for your logo and col-md-4 col-md-offset-4 for your navbar.

Or 2. You can use this example from Bootstrap to use pull-right on the navbar to keep it on the right side while your logo stays to the left. This example is within the code.

Report · Mar 06, 2018

Ben M and Ben P:

Here's my code for the navbar. Any corrections in the code would be appreciated.

</head>

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

<li><a href="About.html">About</a></li>

<li><a href="photo_classes.html">Classes</a></li>

<li><a href="http://kacproductions.photoshelter.com/gallery-list" target="new">Stock Photos</a></li>

<li><a href="Photo_tours.html">Tours</a></li>

<li><a href="http://kathyadams-clark.pixels.com/index.html" target="new">Prints</a></li>

</ul>

</div>

</div>

Report · Mar 06, 2018

I assume you're going for something like this?

CODE:

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

<style>

body {padding-top: 100px;}

.navbar {min-height: 65px /**same height as logo**/}

.navbar-brand {margin:0; padding:0;}

.navbar-right {margin-top: 8px; /**adjust as req'd**/}

</style>

</head>

<body>

</button>

</div>

</ul>

</div>

</nav>

PAGE CONTENT GOES HERE....

</div>

</body>

</html>

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

Report · Mar 18, 2018

Nancy, I tried your fix and the logo is still below the photo.

Here's a link to my site: Kathy Adams Clark KAC Productions

Report · Mar 18, 2018

Logo is not below the carousel photo for me. See screenshots.

BTW Kathy, I advise against disabling right click. It's super annoying, utterly useless and easily defeated by turning off JavaScript. If you're serious about your work, use digital watermarking. There's even a Photoshop addd-on for it.

Photography Copyright Protection Solutions | Digimarc

Digimarc copyright protection in Photoshop

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

Report · Mar 18, 2018

Nancy, would you look again.

At one point, I got the logo in the right spot. That made the sponsor icons in the middle of the page go out of alignment.

I read some more and finally got the sponsor icons back into position.

Now the logo is super tiny up at the top of the webpage. Do appreciate your comment on right-click.

Report · Mar 19, 2018

When things don't work as expected, it's almost always due to code errors. See link below for details.

Showing results for http://kathyadamsclark.com/ - Nu Html Checker

<At one point, I got the logo in the right spot. That made the sponsor icons in the middle of the page go out of alignment.>

That implies that you're not targeting the correct CSS selectors.

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

Report · Mar 19, 2018

Great information, Nancy. I knew there was a coding error but didn't know where to start. I'm heading off to fix all the errors you pointed out.

Thanks for your help and for being there.

Report · Mar 19, 2018

Problem solved! You are great. Thanks for being patient with me.

Kathy Adams Clark

Report · Mar 06, 2018

Ok, so I re-examined the code and did a quick refresher on Bootstrap 3 menus. So the issue that is presenting itself is the class .navbar-brand class. Going back to the Bootstrap 3 documentation ( https://getbootstrap.com/docs/3.3/components/#navbar-brand-image ) it appears this can cause issues depending on your image dimensions. In your case it is. So what you would need to do is go to your styles.css file which is being included after the bootstrap CSS and then add the following in:

.navbar-brand { padding: 0; }

Because of the order of operations, this rule will cancel out the current padding: 15px 15px; in the bootstrap.css file that you have included. Now this assumes that your new image is the same size as your current image (324x68px). If the sizing is different, other adjustments may need to be made.

Report · Mar 18, 2018

Ben, that still didn't fix the problem. My logo is slightly below the container.

I added the .navbar-brand {padding: 0;} to the last line of the styles.css file. Uploaded that file.

Then changed the logo png in the index source code and uploaded that.

You'll see that the logo is still sitting below the images and out of alignment with the navigation bar.

This logo is the exact same size as the old logo and the old logo was aligned.

Here's a link to my site: Kathy Adams Clark KAC Productions

http://kathyadamsclark.com/

Adobe Community

Logo is out of alignment

1 Correct answer