Change header logo position & sticky menu - Responsive theme

Store Design
1

Hello everybody,

I am just wondering if someone can help me sort this problem please?

JeromeLyu_0-1610408442161.png
JeromeLyu_0-1610408442161.png1649×242 15.7 KB

This is my website’s header bar, anybody knows how to move the logo to the left and in line with the menu? like shown below:

JeromeLyu_1-1610408585547.png
JeromeLyu_1-1610408585547.png1300×170 19.4 KB

and by the way, I am also struggling how to make the header menu sticky on both desktop and mobile? I have tried some methods but they were not working. Please, someone, help me sort these problems!!

Thank you guys in advance!!

2

Hello,
Please share your site url.
So that I can check and let you know the exact solution here.

3

Hi my URL is www.maxspnbilliards.co.nz

password: bohshu

4

Hi, we have the same question. Is there a solution? @oscprofessional @Gabe

5

@JeromeLyu
Hello,
Its Some CUstomization Work So Can You Please Share Your Store Details
I Will Check and Provide Proper Solution

6

Hey @oscprofessional , thank you for your fast answer. Our domains are cbdsi.eu and cbdia.eu!

Best Regards,

Hanni

7

@JeromeLyu
Hello,

.logo a.logo-align--left {
float: left;
}
#nav {
position: absolute;
top: 40px;
left: 0;
right: 0;
width: 70%;
}
#nav.nav-border--none ul li {
padding: 10px;
}
.header_icons.social_icons {
margin-top: 20px;
}

@media screen and (max-width: 798px){
.logo a.logo-align--left {
width: 40%;
margin: 0 auto;
text-align: center;
}
#mobile_nav {
	position: absolute;
	top: 20px;
	width: 35%;
  z-index: 9999;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->styles.scss.liquid

Like This

oscprofessional_0-1666770479093.png
oscprofessional_0-1666770479093.png1574×795 169 KB

1 Like
8

Hey, thank you for your expense. I tested it in an older version. Here’s a screenshoot:

Do you have a corrected version? It should be at the left side next to “HOME”.

Would be perfect if the navigation points could go a little bit to the left site, after the logo appears there just because synchronous would be perfect. If it’s too complicated, we would be happy with online the logo left next to the navigation.

I appreciate your work so strong, thank you mate!

Edit: Her you can see how it looks like https://n4tsmw4cmtlshtxa-56409817274.shopifypreview.com
@oscprofessional

9

@Hanni_CBDSI
Hello,

.logo a.logo-align--center {
	text-align: left;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->styles.scss.liquid

Like This

oscprofessional_0-1666777296747.png
oscprofessional_0-1666777296747.png1509×742 133 KB

This Solution Its Useful so Please Like And Accept Solution

1 Like
10

Great work! The reason, why we wanted to have the logo on the left site is because of the space between our h1 and the navigation. Is it possible to delete this gap?

This is the most important thing for us. If it would be possible, this would be the final solution!

@oscprofessional