Jump to content

Replace Burger With Text + Hover

Go to solution Solved by Web_Solutions,

Recommended Posts

Hello! 

I've used this code to replace the burger menu with text, but I would like the text to change colour on hover. I've tried a few different things but can't seem to figure it out. 

Current code: 

// Mobile Menu Text //

.burger-box:after {
content: "Menu =";
text-align: right;
font-size: 16px;
color: #000;
display: block !important;
}

.burger-box {
  width: 60px !important;
  height: 25px !important;
}

.burger-box div {
display: none;
}

Any idea how to add hover effect to the text? 

https://violin-halibut-2csa.squarespace.com/

mmmarchitects

Thanks!

 

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
9 minutes ago, robfeltrin said:

Hello! 

I've used this code to replace the burger menu with text, but I would like the text to change colour on hover. I've tried a few different things but can't seem to figure it out. 

Current code: 

// Mobile Menu Text //

.burger-box:after {
content: "Menu =";
text-align: right;
font-size: 16px;
color: #000;
display: block !important;
}

.burger-box {
  width: 60px !important;
  height: 25px !important;
}

.burger-box div {
display: none;
}

Any idea how to add hover effect to the text? 

https://violin-halibut-2csa.squarespace.com/

mmmarchitects

Thanks!

 

Here is the code

.burger-box:hover:after {
  color: red !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.