Question 232013 in Html Question posted in
Some basic documentation can be found here.

Html – How to center an image in the nav-bar when it shrinks?

I’m using a template to build website (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template) and the original nav-bar looks like this:

Before shrinking:
nav-bar

After shrinking::
nav-bar

I changed the logo to mine. Because mine is vertically smaller, so I changed the margin from 10px to 20px

.logo {
    width: 40%;
    margin: 20px 0px 20px 0;
}

It looks like centered:
nav-bar

But when I scroll down the page, the navigation bar shrinks, and my logo doesn’t stay vertically center. It goes up.
nav-bar

I tried to fix the css, but it doesn’t work

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    margin: 20px 0px 20px 0;
}

This is the html for that logo

<div class="logo smooth-scroll">
    <a href="#banner"><img id="logo" src="images/boxinghub.png" alt="boxinghub logo"></a>
</div>

The code in css control the position when shrinking, but even I add .logo or #logo, it doesn’t help.

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

Thx in advance for your help!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Problem solved after add these lines of code:

    @media (min-width:768px) {
    #logo {
        margin: 10px 0px 0px 0px;
    }
}

    But I still don't know how and why @media controls shrinking...Does anybody know?


  2. 0

    i see that you have used just a class selector for the image tag try using #logo instead and see if it makes a difference

    Login or Signup to reply.
  3. 0

    You can use background methods
    Like background-position:center

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search