Archived topic
how to create?
9 replies · Started by Yogesh on December 4, 2021
Hello team,
i just can not think how to write my problem. that is why I just add "how to create?"
My question is how can I create like this?
I want to create a button in primary navigation with name "more". When someone click on "more" then separate menu will appear in off-canvas. I do not want to show off canvas hamburger icon. i want to show "more" instead of hamburger icon in desktop(off-canvas menu). Same when I see this in mobile then, only primary navigation menu appear. I do not want to show 'more" button in mobile.
Hi there,
1. Go to Customizer > Layout > Off Canvas and:
a) Enable the Off Canvas Panel on Desktop only.
b) Add the Word More to the Desktop Toggle Label
2. Add this CSS to your site:
.menu-bar-item.slideout-toggle .gp-icon {
display: none;
}Hello David, thank you for your reply and more thank your for your help. Actually I made a desired diagram. I want to create like this https://prnt.sc/21oyzdf. From this, Logo is done. Button(talk to us) is done. Off Canvas menu is done. All left is a big search bar in between logo and button(talk to us). How can I achieve this? is it possible? If possible then please provide code. I am awaiting. Thank you.
Add a search widget to Appearance > Widgets > Header. Once thats in place, provide a link to your site so i can provide some CSS to position it.
Hello thank you for your reply. I have added seach widget to Appearance> Widgets> Header. Site link I am mentioning in temporary credentials area. Please look there. Thank you.
This CSS:
.nav-float-right #site-navigation {
order: 20;
margin-left: 20px;
}
.nav-float-right .header-widget{
margin-left: auto;
}And some CSS for when the header breaks to mobile, this will add a little space above the search
@media(max-width: 992px) {
.header-widget {
margin-top: 20px;
}
}Hello, thank you so much for your code. But a little problem here. Search button is not exactly in the middle. It is somehouw more on right side. What I am missing? You can check site again. How can I push this in middle?
I just changed .nav-float-right #site-navigation {
order: 20;
margin-left: 20px;
}
.nav-float-right .header-widget{
margin-left: auto;
}
into
.nav-float-right #site-navigation {
order: 20;
margin-left: auto;
}
.nav-float-right .header-widget{
margin-left: auto;
}
is it correct? will "auto" create any problem in responsiveness or should I increase more px to push search bar in middle?
thank you.
Hi Yogesh,
I'm not seeing a header widget or search bar, can you tell me where shall I be looking at?
https://www.screencast.com/t/ig4Ysv77p13u
Hello, thank you. problem solved.
Glad to hear that :)
