Hi guys, this may be asking too much but I’ve been researching so much to change the header, but could not find a way.
For the Search Bar I tried https://community.shopify.com/c/shopify-design/search-bar-in-dawn-theme/td-p/1635928 , but this gave me a foot long blank space above.
For the Category, I wanted to change the arrow to three bars and a line after that so it separates from other menus.
It would be a great help if someone can help me with this matter. Thank you!
@Albertlee
you need to do custom code for this kind of changes. can you share your store url?
Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
@Albertlee
Task 1 : Add below html code into header.liquid page
by replacing below code with the above one :
Task 2 :for logo width add below css
.header__heading-logo {
max-width: 22% !important;
}
Task 3 : by add below code in css you can get hamburger menu
@media screen and (min-width: 1024px){
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {display: none !important;}
.header:not(.header--middle-left) .header__inline-menu { display: none !important;}
.header--top-center *>.header__search, .header:not(.header--top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}
result :
Thank you for the help! But may I know which css I put this to? Or do I add a new asset?
@Albertlee Add in base.css file.
