How can I adjust the size of my logo and icons without altering the header bar?

Store Design

Topic summary

Main issue: Increase logo, menu font, and cart icon sizes without increasing the header bar height on cheeknchubbs.com.

Access: Storefront password provided to allow inspection.

Proposed fixes (CSS changes):

  • Added menu padding and set header__logo max-width (worked for logo size but also enlarged header).
  • Set .menu-position–inline .header__logo to width:100% and position:absolute to decouple logo size from header height (worked, but menu shifted left/off-center).
  • Added .top-bar .social_icons { z-index: 9; } to address layering.

Outcomes/side effects:

  • After absolute positioning, header height no longer tied to logo size, but top menu became off-center.
  • After adding the social icons z-index rule, the entire site appeared black-and-white and layout broke; removing the line did not restore previous styling.

Unanswered items:

  • How to center the top menu after changes.
  • Which selectors to use to enlarge menu fonts and cart icons specifically.

Status: Unresolved. Recent CSS changes likely introduced conflicts; needs guidance to restore styling and properly center/resize elements without affecting header height.

Summarized with AI on February 28. AI used: gpt-5.
1

How do I resize the logo and icons on my header without affecting my banner height? Whenever I adjust the logo size width, the header bar gets thicker, I want my logo, menu fonts and cart icons to be bigger but I want the header bar to remain the same and not get bigger as I increase the logo size.

My website url is : cheeknchubbs.com

2

@Edricpoh

Your shop is password protected. Please share store front password.

Thanks!

3

Hi, storefront password is admin

4

@Edricpoh

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/styles.scss.liquid–>paste below code at the bottom of the file.

@media (min-width: 1024px){
.menu .vertical-menu li {padding: 0px 20px 0 20px !important;}
}

div.header__logo { max-width: 150px !important;}
5

Hi, Thank you so much!

Yes the code worked to some extend. I am able to increase the logo size by changing the max width value for the ‘header_logo’ field in the code you sent.

However the header became bigger together with the logo. Any way I can make the header smaller? I’ve tried playing with the values for the ‘min width’ and ‘vertical header’ as well but it didn’t change.

Also, for the menu fonts and shopping cart icons, which do I adjust?

1 Like
6

@Edricpoh

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/styles.scss.liquid–>paste below code at the bottom of the file.

.menu-position--inline .header__logo {
    width: 100%;
    position: absolute !important;
}
7

@Edricpoh

also add following css class your css file

.top-bar .social_icons { z-index: 9;}
8

Oh yes now it is independent of the logo size!

But it has shifted my top menu slightly to the left and its off centre now. How do I shift it to centre?

9

Hi, after adding the ‘top bar social icon’ line into the css, something went wrong with my website, now it’s black and white throughout and the layout is missing.

What did I do wrong?

10

I tried removing it as well but it did not revert to what it was before.