Support Forums

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

Your Time: Our Time:

Hide header Menu and Customize Mobile Menu

Featured Lock Resolved
I am using shopin and here's my development website, dev3.ayonaturals.com I want to my menu to be exactly like this https://slaycolors.com/, the menu bar is hidden and also the menu item, then mobile menu is bigger. how will I do that on my template? Thank you. Please help me. @touffiq and @rifat Wahid Alif .

15 Answers

Toufiq - Staff

2 weeks ago #Permalink
Hi there,

Please add this css code.


@media only screen and (max-width : 320px) {
#offcanvas-toggler {
float: left;
line-height: 87px;
margin-left: 15px;
font-size: 40px;
z-index: 100;
position: relative;
z-index: 9999;
margin-top: 100px;
}
}
@media only screen and (max-width : 480px) {
#offcanvas-toggler {
float: left;
line-height: 87px;
margin-left: 15px;
font-size: 40px;
z-index: 100;
position: relative;
z-index: 9999;
margin-top: 100px;
}
}


-Thanks

Toufiq - Staff

3 weeks ago #Permalink
Hi there,

Please follow the instruction.

Add this css code inside the custom.css file

#sp-header {
box-shadow: none;
height: 70px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 99;
background: transparent;
}
.layout-boxed .body-innerwrapper #sp-header #sp-menu {
width: 100%;
}


-Thanks

jcamo

3 weeks ago #Permalink
Thank you how will I make the triple line menu bigger that is capturing attention to make the visitors notice that it is the menu. Thanks.

Toufiq - Staff

3 weeks ago #Permalink
Thank you how will I make the triple line menu bigger that is capturing attention to make the visitors notice that it is the menu. Thanks.


Hi, Your query is not clear. Please explain more details and share a screenshot that you want to exactly. Thanks

jcamo

2 weeks ago #Permalink
please see attached file, how will I make that much bigger?

Attachments (1)

  • menu.png
    menu.png 13.9 KB

Toufiq - Staff

2 weeks ago #Permalink
Hi there,

Please add this css code inside the custom.css file.


#offcanvas-toggler {
float: right;
line-height: 87px;
margin-left: 15px;
font-size: 60px;
z-index: 100;
position: relative;
margin-top: 20px;
}


-Thanks

jcamo

2 weeks ago #Permalink
Thank you it works however on mobile view it's hidden. How can I fix it?

Toufiq - Staff

2 weeks ago #Permalink
Thank you it works however on mobile view it's hidden. How can I fix it?


Hi, Here is no problem found. Thanks

https://prnt.sc/hvenk5

jcamo

2 weeks ago #Permalink
Thank you it works however on mobile view it's hidden. How can I fix it?


Hi, Here is no problem found. Thanks

https://prnt.sc/hvenk5


when you untoggle the ads you will see the menu but when the ads is visible the menu is hidden

Toufiq - Staff

2 weeks ago #Permalink
Hi there,

Did you put the CSS code that i have replied my previous reply?

-Thanks

jcamo

2 weeks ago #Permalink
Hi there,

Did you put the CSS code that i have replied my previous reply?

-Thanks

yes

jcamo

2 weeks ago #Permalink
Hi there,

Please add this css code.


@media only screen and (max-width : 320px) {
#offcanvas-toggler {
float: left;
line-height: 87px;
margin-left: 15px;
font-size: 40px;
z-index: 100;
position: relative;
z-index: 9999;
margin-top: 100px;
}
}
@media only screen and (max-width : 480px) {
#offcanvas-toggler {
float: left;
line-height: 87px;
margin-left: 15px;
font-size: 40px;
z-index: 100;
position: relative;
z-index: 9999;
margin-top: 100px;
}
}


-Thanks


Thanks its now fixed.

jcamo

2 weeks ago #Permalink
Thank you so much I really appreciate your quick reply! Excellent support.

I have also one Topic here

https://www.joomshaper.com/forums/how-will-i-incorporate-this-feature-on-organic-life-to-shopin

Toufiq - Staff

2 weeks ago #Permalink
Hi there,

Please add this css code.


@media only screen and (max-width : 320px) {
#offcanvas-toggler {
float: left;
line-height: 87px;
margin-left: 15px;
font-size: 40px;
z-index: 100;
position: relative;
z-index: 9999;
margin-top: 100px;
}
}
@media only screen and (max-width : 480px) {
#offcanvas-toggler {
float: left;
line-height: 87px;
margin-left: 15px;
font-size: 40px;
z-index: 100;
position: relative;
z-index: 9999;
margin-top: 100px;
}
}


-Thanks


Thanks its now fixed.


Hi, You are most welcome & Thanks


There are no replies made for this post yet.
However, you are not allowed to reply to this post.
Sorry, the discussion is currently locked. You will not be able to post a reply at the moment.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 146
Toufiq

Toufiq

Total Accepted Answers: 40
Sifat

Sifat

Total Accepted Answers: 20
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 12
Pavel

Pavel

Total Accepted Answers: 6

100+

Templates

200,000+

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