CSS help to fix problem with Header

Need some help to align site title with sign up, log in, search and hamburger button. Need some CSS help.

Thank You

You could try a padding-top, I tried with 3 pixels, but it may be a bit less or more

.d-header #site-logo {
    padding-top : 3px
}

You light need to fix the height of the logo if you want something perfect. This will help :

.d-header #site-logo {
    padding-top : 3px;
    height: 30px;
}
2 Likes

I made the changes as you have mentioned and still the same. I think its the button that’s needs to be aligned with the title.

Oh my bad, I thought it was an image. It should be this class:

.d-header #site-text-logo {
    padding-top : 3px
}
1 Like

Thank you @Steven . I want to align all the 5 blocks in a straight line. See the dotted lines in the image. I think you have solved 80% of my problem.

Remove these from your desktop theme - Starting at line #8

header #site-text-logo {
    font-size: 26px;
    font-family: 'Redressed', cursive;
    color: #2471a3; 
    position: relative; // <-------- 
    top: -3px; // <-------- 
    left: 25px; // <-------- 
    filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}

then add this in the desktop tab

.d-header .title {
  margin-left: 25px;
}

Then add this to the common tab:

@import "common/foundation/variables";

.d-header #site-text-logo {
    font-size: $font-up-3;
}
.d-header .header-buttons {
    margin-top: 0;
}

5 Likes

Thanks @Johani Thank you so much. How can I lift the whole thing ( Text logo, sigh Up button, sign In button, search, and the hamburger menu ) up by 1px ?

1 Like

I’d say this:

.d-header > .wrap .contents {
    margin-top: -1px;
}

Joe might have something better, he’s on another level :open_mouth:

5 Likes

He is really a CSS god. He knows everything about CSS. When I struggle with CSS, the first name that comes into my mind is @Johani. Thank you @Steven. Thank you, Joe. You guys are wonderful.

3 Likes