Want to move logo to the left and keep nav bar the same.

Solved
joesmith9
Tourist
7 0 1

So as my website currently stands, the top picture would be the desired outcome, however when I move my logo to the left it causes the nav bar to change.

 

Is there anyway to just move the logo without it affecting anything else? And I would also like to add a "call us on this number" text in the header also. How is this possible? I'm using the debut theme if that helps at all.

 

Many thanks

 

website mock up help.jpgwebsite current.jpgwebsite current left.jpg

0 Likes
matbaker
Excursionist
14 6 7

Hi @joesmith9 

have you tried setting CSS width property of nav bar to 100%?

It would look something like that: 

#your_navbar_id {
width: 100%;
}
Need Shopify help? Send me an email matbaker66@gmail.com :)
0 Likes
joesmith9
Tourist
7 0 1

Hi @matbaker I can't find the specific code line for it, but the ones I did try it didn't seem to work unfortunately.

0 Likes
suyash1
Shopify Partner
1993 204 304

@joesmith9 - can you please share website link and password?

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
joesmith9
Tourist
7 0 1

tilestack.co.uk

 

password is rovic

0 Likes
suyash1
Shopify Partner
1993 204 304

@joesmith9 - it can be done like this screenshot, but it is not straight forward css change, it needs multiple code altering too, only css will not help

suyash1_0-1611667509329.png

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
joesmith9
Tourist
7 0 1

Yes that would be perfect.

0 Likes
suyash1
Shopify Partner
1993 204 304

@joesmith9 - can you please contact me on my email given below? I will let you know everything in detail

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
matbaker
Excursionist
14 6 7

This is an accepted solution.

@joesmith9 

Thats what you need  

header .site-header__mobile-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

nav#AccessibleNav {
    width: 100%;
    order: 3;
}

header .logo-align--left {
    width: 50%;
}

header .site-header__icons {
    width: 50%;
}

matbaker_0-1611667918516.png

 

 

Need Shopify help? Send me an email matbaker66@gmail.com :)
joesmith9
Tourist
7 0 1

Yes that worked perfectly, thank you so much.

0 Likes