Photoshop Question posted in
The official user guide can be found here.

Bootstrap: Navbar Logo Size – Photoshop

I have a 1700×700 logo and my navbar height is 70. I would like to auto-resize and adapt it to my navbar height. I could resize it to 170×70 with photoshop but the problem is that the image loses quality when I zoom on.

I tried with img-responsive but it doesn’t work.

Thank you!

<a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
}
Tags:

8

Answers


  1. 0

    You can set following css for this

    .navbar-brand {
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
    background-size: contain;
}
    Login or Signup to reply.
  2. 0

    Did you the below one you need not give any external css.

    using the class=”img-responsive”on the image.

    <a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

    Login or Signup to reply.
  3. 0

    Give your logo max-height and make the value to be the height of the navbar like so…

    .navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
    max-height: 70px; /* height of the navbar */
}
    Login or Signup to reply.
  4. 0

    you can use this css

    background: url(../images/logo.png) no-repeat scroll center center / contain ;

    Login or Signup to reply.
  5. 0

    The best option is resizing the logo in Photoshop (or similar).

    Of course if it is displayed in less pixels it loses resolution, but if you load a big logo and then you resize it via css the effect is going to be the same and your page will take more time to load.

    Login or Signup to reply.
  6. 0

    Agree with ABK as far as max-height CSS, but I think JGonDev on resizing the image is the right direction for a performance standpoint. You really should only use CSS to style and design your site. It should not be used to hack your code to force the needed desire.

    As far as resizing, most new developers don’t have access to great design tools like Photoshop, but great if you can! For Mac users, Preview gets the job done for resizing images.

    Open your image in Preview – Go to Tools/AdjustSize:

    Then you can change your width or height to the desired size. Make sure to keep Scale Proportionally checked! This will ensure your image does not get skewed.

    After you resize, click ‘OK’ button. File Save.

    ** Note – Make sure you save your file as a different file, i.e. navbar-logo.png or something similar so you can easily remember what the image should be used for in your code.

    Resizing your image will reduce the bloat and size of your overall website and improve the overall performance of your site.

    Login or Signup to reply.
  7. 0

    **Simplest Answer to your question is **

    <a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    height: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    If you find it useful don’t forget to UPVOTE

    Login or Signup to reply.
  8. 0

    The navbar you will ever need
    Use flex with that justify-content justifies content automatically adjust items into position
    align-items:center, well it’s self explanatory

    Adjust it to your need my liege

    *,
*:before,
*:after {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    transition: .3s all;
}


header {
    background: #D2DCE1;
    z-index: 100;
}

nav {
    width: 100%;
    display: flex;
    padding: 5px 15px;
    justify-content: space-between;
    max-width: 1366px;
    margin: auto;
    margin-bottom: 10px;
}

#logo {
    float: left;
    width: 250px;
    height: 40px;
    background: url('https://i.imgur.com/K5bq1MD.png') left/contain no-repeat;
}
#logo:hover {
    background: url('https://i.imgur.com/Kbbcixn.png') left/contain no-repeat;
}

nav ul {
    float: right;
    display: flex;
    justify-content: space-around;
}

nav ul li {
    float: left;
    display: flex;
    margin: 0 20px 0;
    align-items: center;
    justify-content: space-around;
}

nav ul li a {
    color: #000;
    opacity: .6;
    display: block;
    font-size: 90%;
    font-weight: bold;
    font-family: Arial;
    letter-spacing: 1px;
    border-top: 1.5px solid transparent;
    border-bottom: 1.5px solid transparent;
}

.active {
    border-bottom: 1.5px solid #ff7700;
    opacity: 1;
}

nav ul li a:hover {
    opacity: 1;
}
    <header id="navbar">
  <nav>
    <a id=logo href="#"></a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>

    </ul>
  </nav>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search