Hi I’m using the Universe theme by Outline and having some issues with logo size in my sticky header. It seems like the logo image on scroll does not shrink and gets squeezed in the minimized header view. This results in me having to keep the logo smaller than I want in the top position (fully scrolled up).
Is there a way to set the logo sizes individually (fixed and on scroll)? I can configure the normal logo width under the theme settings so maybe it’s enough to change in css the version showed when scrolling?
URL: https://arcticlegacy.store/
PW: legacya
Thanks in advance!
1 Like
@Arcticlegacy
sorry for this issue please add this code
- Go to Online Store->Theme->Edit code
- Asset->/universe-core.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.shrink-header .logo-wrap .logo__link {
width: 130px !important; /* change the value as you like */
}
1 Like
Thanks once again! Works great with the scaling but is it possible to get the logo more centered in height (aligned with the menu items, “women” etc), now it’s quite far down when scrolled as shown below.
1 Like
@Arcticlegacy
Yes, please add this code
#main-header .logo-wrap .logo__link {vertical-align: middle;}
1 Like
No luck. Should I place it in the same location?
Again it’s the minimized logo (when scrolling) I need to vertically align with the other header elements.
1 Like
Thanks but no difference.
Outcome below. The dimmed grey logo shows center position.
The reason it won’t align is due to the padding that occurs when in minimized/scrolling state. The block is aligned as can be seen below. Does anyone know how I can remove this top padding so the logo gets aligned middle? Thanks /Johan
Minimized menu (scrolling)
Normal header menu state:
How did you achieve that view?
I played around with this earlier today and by adding the height tag I somehow managed to get it aligned middle. I don’t think it is the correct way though. Would be nicer to remove all padding and center the block properly.
.shrink-header .logo-wrap .logo__link {
width: 80px !important;
height: 32px !important;
}
@Arcticlegacy
i have check now look proper
Yes, if I change the width from 80 to 110 px in the code you sent me, the logo expands upwards from the bottom, filling out the block and making it look more in the middle (see picture below). Not a big thing, just wanted to understand how I can get any image, regardless of size aligned middle in the header. Now the (blue) block is always aligned middle but the content always starts from the bottom of the block as seen below.
.shrink-header .logo-wrap .logo__link {
width: 110px !important;}
1 Like
@Arcticlegacy
Yes, its image block resize set aspect image ration
Dear @Arcticlegacy
- From your Shopify admin, go to Online Store > themes.
- Locate your current theme and then click Actions > Edit code.
- After that in the Assets folder, click to open your theme.scss.liquid file.
- Go to the very bottom of this file and paste the following code(You can change the size yourself):
/* Start */
.header-container.shrink-header #main-header .logo__img {max-height: 1.8rem;}
/* End*/
- Save and check your theme by refreshing it.
Thank’s! Seems to have the same effect as the code supplied by KetanKumar. It adjusts the size of the minimized logo but it still doesn’t align the logo middle (in height) in the blue block as seen below where it’s placed at the bottom. The text “WOMEN”, “MEN” etc is aligned in the middle of the blue block, can’t that be fixed also for the logo (regardless of logo size)?
