Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Center mobile logo on Cuisine template, and also size sticky menu logo

Featured Lock Resolved Task
Hello friends,

I need some helping customized my logo in the Cuisine template. I need help doing these two things:

1.) Centering and resizing the logo in mobile view. I have tried this code, but it is not working:

@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
a.logo {
width:40%;
margin: 0 auto;
}
}

2.) Is there a way that I can resize the logo when the Menu becomes a sticky menu? (When the user scrolls down the screen, is it possible I can reduce the size of the logo?)

Thank you in advance!

My working site: http://dswings.com/newsite2019/

9 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css into your custom css to solve this issue.

@media only screen and (max-width: 425px) {
.sp-retina-logo {
height: 100px;
width: 100px;
}
#sp-header .logo {
display: flex !important;
justify-content: flex-end !important;
}
.menu-fixed #sp-logo .sp-column {
display: flex;
float: right;
}
}
.menu-fixed #sp-logo .sp-column {
display: flex;
}
.menu-fixed .sp-default-logo {
height: 100px;
width: 100px;
}


Here is the custom css field https://prnt.sc/ijudw8

-Best Regards

Shana

More than a month ago #Permalink
Thank you for your reply! This css is working to center and decrease the logo size in mobile view, thanks! But how do I accomplish task #2:

2.) Is there a way that I can resize the logo when the Menu becomes a sticky menu? (When the user scrolls down the screen, is it possible that I can have the logo then become small?)

Thank you in advance!

Shana

More than a month ago #Permalink
Sifat, I spoke too soon. It is actually NOT centering the logo in mobile view. Please help. Thanks

Attachments (1)

  • IMG_3014.PNG
    IMG_3014.PNG 281.5 KB

Sifat - Staff

More than a month ago #Permalink
Hi,
Please check this screenshot http://prntscr.com/mjwdcu

-Thanks

Shana

More than a month ago #Permalink
Hi, I would like the logo bigger than 100px wide in initial mobile view, but I am using your code with a larger width and it is not centered:

@media only screen and (max-width: 767px) {
.sp-retina-logo {
height: 170px !important;
width: 170px !important;
margin-top:10px;
}
#sp-header .logo {
display: flex !important;
justify-content: flex-end !important;
}
.menu-fixed #sp-logo .sp-column {
display: flex;
float: right;
}}

Please help :)

And the second task I'd like to achieve with the logo I will start another forum message since it is a different issue. Thanks!

Sifat - Staff

More than a month ago #Permalink
Please use this css

@media only screen and (max-width: 425px) {
#sp-menu2 {
width: 20%;
float: right;
}
#sp-logo {
width: 75%
}
}



-Thanks

Shana

More than a month ago #Permalink
Sifat, this is not working to center the logo either. Can I change where the off-canvas menu toggler is located? If I can move the off-canvas menu toggler to a different module, then I believe I will be able to center the logo properly and responsively, as it will occupy it's own row. Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. Sorry there is no default feature like that. I found that you've turned off that menu for mobile devices. Would you please PM me your super admin access thus i can check if i can do anything for you.

Note: It's weekend here, i'll come back to your after the weekend. And click on my avatar to get that option to PM me.

-Best Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 128
Sifat

Sifat

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 45
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 5

114

Templates

292771

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us