Change logo position and size on Boundless theme

Solved
Tourist
6 0 0

Hi,
I want to change the logo position and size.
No matter what I’ve tried, the logo stays so small 
Also, I want the logo to be at the center of the slide.
I have the perfect example :
https://bandu.lu/

I want it to be exactly like this.

As you can see, on Home Page, their logo is at the center of the slide. And its size is much bigger than theme’s default.

my Shopify : https://blackcactus.myshopify.com/ 

Thanks

0 Likes

Success.

Shopify Expert
2674 65 664

The example site uses an old version of the theme -- this logo positioning was used in pre-8 versions of Boundless. The slides were un-clickable and the logo was in the middle.

Starting with 8.0 you can add text and buttons to your homepage slides, but the logo is only a small image between hamburger and cart buttons. 

I guess the simpler option is to put your logo as a part of slide image.

It's possible to replicate the old behaviour properly, but will require some coding.

 

And the pretty dirty way is to add the code similar to this to the very bottom of your theme.scss.liquid asset:

.template-index .site-header__logo-image {
    position: relative;
    top: 25vw;
transform: scale(1.5); }

 This will interfere with the slide texts/buttons, but may be Ok'ish if you do not plan to have any.

(edited to only work on homepage)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Tourist
6 0 0

Thank you so much. that's exactly what I needed 

0 Likes
Tourist
6 0 0

now I see that the logo also appears on other pages, at the center of the page.. how can I fix this? 

https://blackcactus.myshopify.com/collections/all 

0 Likes
Shopify Expert
2674 65 664

Oops, my bad -- use this code instead -- this should only apply to the homepage logo

.template-index .site-header__logo-image {
    position: relative;
    top: 25vw;
    transform: scale(1.5);
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
6 0 0

PERFECT! 

also, is there a way to make the logo on other pages (like catalog) a little bigger? 
thanks 

0 Likes

Success.

Shopify Expert
2674 65 664

If you've tried to type in bigger width for logo but it does not grow anymore, this means you've hit the height limit, which is 65px.

You may try changing it by going to  your theme.scss.liquid, searching for the following line and increasing the value (a little):

/*================ #Site Header ================*/
$height-site-header: 65px;
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Tourist
6 0 0

You're the best. 

0 Likes