Jump to content

Nav Menu - flip just the menu item and not the seperator

Recommended Posts

Site URL: https://monibarry.squarespace.com/

Hi there,

I'm trying to figure out if it's possible to flip just the text and not the "/" separators on my nav menu upon hover.

Site: https://monibarry.squarespace.com/
P/W: password123

Can anyone please help?

 

The code I have used for the seperator is;
 

.header-nav-item:not(:last-child) a:after {
    content: "/";
    color: black;
    font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 400;
font-style: normal;
  margin-left: 20px;
}

.header-nav-item a {
  background-repeat: no-repeat !important;
  transform: scaleX(1) !important;
  transition: all ease-in-out .5s !important;
}

.header-nav-item a:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

 

Link to comment
  • Replies 2
  • Views 218
  • Created
  • Last Reply

Remove code you used to add "/" & add new code

div.header-nav-item:after {
    content: "/";
    color: #000;
    font-family: neue-haas-grotesk-display,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 20px;
}
div.header-nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

Remove code you used to add "/" & add new code


div.header-nav-item:after {
    content: "/";
    color: #000;
    font-family: neue-haas-grotesk-display,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 20px;
}
div.header-nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

 

Thank you so much that worked perfectly!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.