• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Adding logo/brand to Bootstrap Basic Navbar

Participant ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

So I've been trying to add the company logo to the new navbar of the site, but I'm having issues. I've tried several different tricks that I've read here and on other sites but nothing seems to be working. The logo is either too large and won't scale down when I try, it vanishes, etc. If someone could help me in figuring this out I'd be greatly appreciative. Here's the code I have right now (without a logo) as well as the CSS.

*HTML*

<nav class="navbar navbar-default">

 

  <!--Figure out how to make the brand logo show up-->

 

  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

   

<!--Navigation html-->   

    <div class="navbar-header">

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

      <a class="navbar-brand" href="#">Brand</a> </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

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

      <ul class="nav navbar-nav">

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

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

       

        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Services & Products <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Cyber Security & Intelligence Programs Support</a></li>

            <li><a href="#">Space Operations & Control</a></li>

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

            <li><a href="#">Warfighter Support & Logistics</a></li>

            <li><a href="#">Weapons Systems Analysis</a></li>

            <li><a href="#">Acquisition Support</a></li>

            <li><a href="#">Test & Evaluation</a></li>

            <li><a href="#">Audio/Visual Technology Applications</a></li>

          </ul>

        </li>

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

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

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

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

      </ul>

</div>

    <!-- /.navbar-collapse -->

  </div>

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

</nav>

*CSS*

.navbar.navbar-default {

background-color: #FFFFFF;

border-bottom: medium solid #001689;

font-family: Atrament, "Agency FB", "Century Gothic", Arial, sans-serif;

font-size: large;

font-weight: normal;

font-variant: small-caps;

letter-spacing: 2pt;

}

.nav.navbar-nav li a {

color: #001689;

}

.dropdown-menu li a {

font-size: medium;

font-variant: normal;

letter-spacing: normal;

.row .nav.navbar-nav {

margin: 0px auto;

width: 715px;

float: none;

}

.row .navbar {

margin-bottom: 0px;

TOPICS
How to

Views

9.6K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 08, 2017 Sep 08, 2017

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</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 .n

...

Votes

Translate

Translate
Community Expert ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

What is the height and width of your image?

Are you using SVG  or JPG/PNG?

You may need to resize the logo and adjust the height of your navbar to accommodate the image size you're working with.

.navbar-default .navbar-header .navbar-brand {

  margin: 0;

  padding: 0;

  height: 53px;  /**adjust as needed**/

}

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
community guidelines
LEGEND ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

What is the height and width of your image?

Are you using SVG  or JPG/PNG?

You may need to resize the logo and adjust the height of your navbar to accommodate the image size you're working with.

.navbar-default .navbar-header .navbar-brand {

  margin: 0;

  padding: 0;

  height: 53px;  /**adjust as needed**/

}

What happens when the client says. Hey buddy I need my logo 4 times as big, as most do. The Bootstrap design never works. You get left with a daft looking naviagtion with huge amounts of space top/bottom.

I guess they really were not thinking about the design aspect when building the framework.

Votes

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
community guidelines
Community Expert ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

If the client wants a prominent logo, I don't put it in the navbar.  I also prefer to work with scalable vector graphic logos because they retain good image quality when re-scaled.   JPGs & PNGs not so much.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
community guidelines
LEGEND ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

If the client wants a prominent logo, I don't put it in the navbar.

Yes, that's a more sensible approach which Bootstrap developers didnt take because they wasnt creating real world projects, most logos cant be a few pixels high as Bootstrap component designers assume.

Votes

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
community guidelines
Community Expert ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

Some web sites use 2 logos.  A large one for desktops and a smaller one in the navbar for mobile devices.  Example:  https://alt-web.com

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
community guidelines
LEGEND ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Some web sites use 2 logos.  A large one for desktops and a smaller one in the navbar for mobile devices.  Example:  https://alt-web.com

I've seen a lot of Bootstrap websites where the devloper has tried to 'squeeze' in a logo which is not suited to the 'brand' area allocated to it. Only a certain type of logo works next to navigation tabs which is why Bootstrap should have provided more options but I guess they only provide 1 of everything - it's a this or nothing kind of workflow for those who cant code. I guess something is better than nothing  for those that are not too discerning.

Votes

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
community guidelines
Participant ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

And I'd be perfectly happy with that (and would prefer doing that way) but I can't figure out the coding for that either. I'm relatively knew to coding in this respect, at least.

Votes

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
community guidelines
Participant ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

So I tried that coding before and I couldn't get the logo to appear. I copied and pasted this code, but still had issues getting the image to appear. I adjusted the size over and over and nothing. Sometimes it will half appear and it looks like it's behind everything else on the page.

Is there a way to add it next to the navigation, perhaps in it's own section, that I'm not thinking about?

Votes

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
community guidelines
Community Expert ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</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 .navbar-brand {

margin:0;

padding:0;

height: 53px;

}

</style>

<body>

<!--begin top nav bar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#"> <img src="https://dummyimage.com/215x53.png" alt="logo" title="XYZ Home"></a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

</div>

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

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

<li><a href="#">MENU 1</a></li>

<li><a href="#">MENU 2</a></li>

<li><a href="#">MENU 3</a></li>

<li><a href="#">MENU 4</a></li>

<!--Site Search -->

<li class="hidden-xs" style="padding-top:10px">

<form action="#" method="get" accept-charset="utf-8">

<div id="custom-search-input">

<div class="input-group">

<input name="query" type="text" class="search-query  form-control" placeholder="Site search" required />

<span class="input-group-btn">

<button class="btn btn-default" type="submit"> <span class=" glyphicon glyphicon-search"></span> </button>

</span>

</div>

</div>

</form>

<!--End Search -->

</li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<div class="container">

<div class="row">

CONTENT GOES HERE....

</div>

</div>

<!--latest jQuery-->

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

</script>

<!--Bootstrap-->

<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— Product User, Community Expert & Moderator

Votes

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
community guidelines
Participant ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

Thanks! I'll give that a try.

Votes

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
community guidelines
Community Expert ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

Kathleen,

Reading over some of the comments, I get the impression that some people seem to think that, when using Bootstrap, you should abide by the rules of Bootstrap. Nothing is further from the truth.

As a youngster, I used to love reading Enid Blyton's books named The Famous Five. The good part about the series was that I did not have to read the books in sequence, in fact I did not even have to read all of the books. If there was a book that I did not like, I did not read it.

So too with Bootstrap, instead of a library of books, it is a library of code from which to pick and choose.  

Take a look athe the following web page, you would not recognise it as a Bootstrap site. It was developed by adding an extra two score and ten (or thereabout) lines of CSS on top of Bootstrap..

junk.png

Nancy's example shows another use of Bootstrap where she has chosen to use a variant of the Bootstrap menubar.

What I am trying to say is, that Bootstrap is a tool to get you where you want, not where Bootstrap is leading you. It's not a this or nothing kind of workflow. Of course you must always keep in mind that a working knowledge of HTML, CSS and JS is a primary requirement.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

That's a nice example of what a creative person CAN do with Bootstrap.  I've also seen many other examples where you would not know it's Bootstrap-based until you look at the code.

I think what some people forget to consider is that Bootstrap was created for web application developers.  Out of the box, it's ideally suited for backend interfaces.  In fact that's why I started using it.

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

I think what some people forget to consider is that Bootstrap was created for web application developers.  Out of the box, it's ideally suited for backend interfaces.  In fact that's why I started using it.

For backend it may not matter so much what the presentation looks like. The code in those circumstances is more functional, not to produce a design which is more appropriate for front-end, exactly why back-end coders should use a framework if they wish, no one gives a toss what it looks like, believe me I've seen my fair share of back-end and most arent 'pretty'.........................

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

osgood_  wrote

For backend it may not matter so much what the presentation looks like.

Completely disagree, for me the back-end, especially the functionality and ui is more important than the front-end. Get the back-end wrong, make it difficult and unappealing to use, and a site is asking for problems.

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

pziecina  wrote

osgood_   wrote

For backend it may not matter so much what the presentation looks like.

Completely disagree, for me the back-end, especially the functionality and ui is more important than the front-end. Get the back-end wrong, make it difficult and unappealing to use, and a site is asking for problems.

Well we agree, I clearly stated that functionality for a back end is the priority as opposed to the visual aspect.....so I'm not sure where you disagree?

Obviously a backend does not need to look as appealing as the front end as the backend is used by a selective group of people to carry out updates. So long as it is functional and clearly layout out, job done. It doesnt need all the extra 'eye candy' that you need for the front end, as its not competing to win over users that visit the website, because they never see the back-end.

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

I disagree in that although the eye candy is not required, the back-end still neads to convey a sense of 'pleasure to use'.

As an example, the back-end for wordpress may be o/k for an unprofessional users blog post back in the early 00's, but for a buisness that has to combine multiple tasks and for someone who must work with that back-end all day and every working day, it fails miserably. It is now 2017, but for many developers and users the back-end is still pre 2001 style and functionality, reminding me of the worst dos/unix programs for db managment and data retrieval systems designed and built back in the 70's/80's.

A back-end for me should give the user a feeling of confidence, and competance when using. All functions should fit in with the users requirerments, be a complete whole, and not just a 'that does the job' programers after though, which many if not most are.

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

Sure but you are talking websites which cost many, many thousands of pounds to develop, not a few thousand or few hundred. No one in here apart from you maybe will ever be working on those kinds of sites.

Ive built a few backends and sure l try and make them as pleasing and as functional as l can but it doesnt concern me that the padding or margin on some elements are not perfect in my eyes, the functionality is more important, where as l would take considerable more time to adjust padding and margin etc in front end development.

As it goes Wordpress back end  is pretty pleasing to the eye in comparison to some other bespoke cms lve seen, as to whether its functional or overkill and confusing is open to debate.

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

osgood_  wrote

Sure but you are talking websites which cost many, many thousands of pounds to develop, not a few thousand or few hundred. No one in here apart from you maybe will ever be working on those kinds of sites.

True on both counts, plus the 'back-end' i work on comprises over 99% of the site and has been in a continuous process of development and improvements for almost 15 years.

My point is though, and one that i think many people forget, is that some users of Dw, (and users of other web dev programs) are looking to expand from small template/framework sites, if not now then in the future. I am not particularly interested in the 'just for myself' or 'for a mate' site developer, but in the 'I want to develop the best and expand' user, possibly who may never post in the forum, but may consider doing so at some point.

The above, is why myself and the people who develop Dw and represent Dw users, are constantly in disagreement.

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

pziecina  wrote

My point is though, and one that i think many people forget, is that some users of Dw, (and users of other web dev programs) are looking to expand from small template/framework sites, if not now then in the future. I am not particularly interested in the 'just for myself' or 'for a mate' site developer, but in the 'I want to develop the best and expand' user, possibly who may never post in the forum, but may consider doing so at some point.

I agree, the forum l think would benefit from a wider variety of developers keen to progress beyond just using frameworks and extensions but there is obviously a reason that is not happen.

Hummm dont mention webdev programs its a sore point at the moment. I cant think of one l have tested out that lm truly satisfied with. Its deciding which is the best of what are a bad bunch.

Hopefully another player will emerge who get the basics right before introducing the more optional stuff. I live in hope.

Votes

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
community guidelines
LEGEND ,
Sep 09, 2017 Sep 09, 2017

Copy link to clipboard

Copied

BenPleysier  wrote

Kathleen,

Reading over some of the comments, I get the impression that some people seem to think that, when using Bootstrap, you should abide by the rules of Bootstrap. Nothing is further from the truth.

Of course you must always keep in mind that a working knowledge of HTML, CSS and JS is a primary requirement.

Unfortunatley that's what they dont have an never will because they are NOT interested in writing code but just want to point and click, you fail to see my point. I see very few posts anymore in this forum actually requesting help about code issues, maybe that is for a reason, beacuse the majority are dependent on something else creating it for them, regrdless of if its suitable or not.

Unless you can write code Bootstrap as any other framework for that matter will only be able to provide you with what it has, limited options. These may not always be the required solution or one which make for sensible visual presentation.

Votes

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
community guidelines
Guest
Sep 19, 2019 Sep 19, 2019

Copy link to clipboard

Copied

LATEST
thank you for info

Votes

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
community guidelines
Participant ,
Sep 08, 2017 Sep 08, 2017

Copy link to clipboard

Copied

I have three different versions I can chose from when it comes to the logo. Jpg, png and svg. I was planning on using the svg but when I try it doesn't show up. As to the size I was planning on using css to change the size.

Votes

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
community guidelines