How can I modify the Frame theme header text to a hamburger menu?

Store Design
, , , , ,
1

Hello!

How do i change the text in the header to a hamburger menu? And stop it from changing color when you hover over the header?

Thank you.

Alphagroup.as

alpha321

2

Hi @Rubberduck

May I suggest these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Copy code below to bottom of file
header-drawer {
	display: block!important;
}
.header__inline-menu {
	display: none!important;
}
@media screen and (min-width: 990px) {
	#menu-drawer {
		width: 99vw;
	}
	body.overflow-hidden-tablet {
		overflow: hidden;
	}
}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

1 Like
3

Amazing, thank you very much! Is it possible to also write (Menu) On the right side of the hamburger menu?

4

Hi @Rubberduck

Would you like to show menu likes the screenshot below?

EBOOST_0-1671927562681.png
EBOOST_0-1671927562681.png1476×490 372 KB

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Copy code below to bottom of file
header-drawer {
	display: block!important;
}
@media screen and (min-width: 990px) {
	#menu-drawer {
		width: 99vw;
	}
	body.overflow-hidden-tablet {
		overflow: hidden;
	}
	.header__inline-menu {
		display: block!important;
	}
	body .header {
		display: flex;
	}
	body header-drawer {
		order: 1;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin-top: .8125rem;
	}
	body .header .header__heading {
		order: 3;
		margin: 0 auto;
		flex: 0 0 20%;
		text-align: center;
	}
	body .header .header__icons{
		order: 4;
		flex: 0 0 40%;
		justify-content: flex-end;
	}
}

Hope can help

EBOOST