30% discount! It’s a Halloween treat! Details

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

More than a month 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

More than a month 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

More than a month 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

More than a month 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

More than a month ago #Permalink
please see attached file, how will I make that much bigger?

Attachments (1)

  • menu.png
    menu.png 13.9 KB

Toufiq - Staff

More than a month 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

More than a month ago #Permalink
Thank you it works however on mobile view it's hidden. How can I fix it?

Toufiq - Staff

More than a month 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

More than a month 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

More than a month ago #Permalink
Hi there,

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

-Thanks

jcamo

More than a month ago #Permalink
Hi there,

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

-Thanks

yes

jcamo

More than a month 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

More than a month 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

More than a month 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: 167
Sifat

Sifat

Total Accepted Answers: 101
Toufiq

Toufiq

Total Accepted Answers: 74
Pavel

Pavel

Total Accepted Answers: 4
SS

SuperSys IT Services

Total Accepted Answers: 2

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

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