Header image is not vertically centered, mobile menu misaligned with the image

Sparkling
1

I added a header image to my test site, http://test.hogkammen.se/sparkling
Noticed that the image was not vertically centered, and I have made a workaround (but not probably the correct way) to override that problem (in my case a static 15px:

div#logo {
  margin-top: 15px;
  width: 120px;
}

After (and before) this incorrect fix (which is not applied on the public test page) the minimized menu for mobile view is not alogned with the logo image.

2

HI there

Are we talking about the header image or logo? if its about the logo try this code:

div#logo {
position: relative;
top: 10px;
}

3

I noticed that my reply disappeared…
It’s about the logo in the menu area. If possible, I would like it vertically centered disregarding its height (if we change the logo, we otherwise would have to change the margin/position of it).

The worse problem is that the menu area is doubled in height on smaller screens because it moves below the logo area (as seen in the second picture).

/PeO

4

Open your html file and find “div#logo” and add the following (float:left;):

div#logo {
    float: left;
    position: relative;
    top: 10px;
}

  1. Now search again (CTRL+F) for “site-header” and change:
    “margin-bottom: 70px;”
    to
    “background-color: #183448;”

  2. Last step in HTML file search for “.navbar .container .navbar-brand” and add the following (“padding: 10px;”):

.navbar .container .navbar-brand, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar.navbar-default {
    padding: 10px;
    font-family: calibri;
}
5

HI Peoy

Well, in this case, you can try this code:

div#logo {
display: inline;
}

Editing theme files might be dangerous, I don’t suggest you do this