Animated Underline

Site URL: http://www.andreaaronica.com

Hello everyone,

what I'm trying to do is a animated underline hover effect under the pages on my header (squarespace 7.1).

The password for my website is: almostready

I managed to use this code in my CSS:

nav a::after {

  border-bottom: 1.5px solid #000000;

  content: '';

  display: block;

  position: relative;

  top: 0.5px; /* Change the vertical position of the underline */

  transition: width 0.35s;

  width: 0%;

}

nav a:hover::after,

nav .current-menu-item a::after {

  width: 100%;

}

And it works just fine even though it takes the page titles slightly up. Not a big deal (But if I can fix also that it would be great). The real problem is with the mobile version. The underline is too wide and it doesn't underline just the text but also the social buttons and the button. 

The code I used for mobile is:

@media (max-width: 979px){

    nav a::after {

          top: 0px; /* Change the vertical position of the underline */

    }

}

but it does absolutely nothing, actually it messes up the desktop version. I really tried every kind of css code I could find but I'm totally stuck. Any help would be appreciated. Thank you in advance.

5 hours ago, AA95 said:

Site URL: http://www.andreaaronica.com

Hello everyone,

what I'm trying to do is a animated underline hover effect under the pages on my header (squarespace 7.1).

The password for my website is: almostready

I managed to use this code in my CSS:

nav a::after {

  border-bottom: 1.5px solid #000000;

  content: '';

  display: block;

  position: relative;

  top: 0.5px; /* Change the vertical position of the underline */

  transition: width 0.35s;

  width: 0%;

}

nav a:hover::after,

nav .current-menu-item a::after {

  width: 100%;

}

And it works just fine even though it takes the page titles slightly up. Not a big deal (But if I can fix also that it would be great). The real problem is with the mobile version. The underline is too wide and it doesn't underline just the text but also the social buttons and the button. 

The code I used for mobile is:

@media (max-width: 979px){

    nav a::after {

          top: 0px; /* Change the vertical position of the underline */

    }

}

but it does absolutely nothing, actually it messes up the desktop version. I really tried every kind of css code I could find but I'm totally stuck. Any help would be appreciated. Thank you in advance.

Are you trying to look for a new hover effect code, or keep this one and just tweak it? Because I really love that give affect you have. Oh and btw, the food on your website looks super good.😁

56 minutes ago, inunzi said:

Are you trying to look for a new hover effect code, or keep this one and just tweak it? Because I really love that give affect you have. Oh and btw, the food on your website looks super good.😁

Hi Inunzi,

I'd love to keep it but if you have a new CSS is fine as long as I get the same result. Thank you so much, I really apreciate it 🙂

Have you tested it on my site too? In a sec I'll give it a try even though I used a similar css snipet but it didn't work. Anyway fingers crossed, I'll let you know how it goes. Thank you 🙏🏻

I'll send you also a video of the problem I was talking about in the first text

1 hour ago, inunzi said:

I tested this code on my site, and it doesn't show a line under the social icons on desktop nor on mobile. You can also customize the transition speed, the thickness of the line, and I think you can also change the color of the line too. Copy and paste the code below in the custom css section, located the the design page. 

// Stretchy Navigation Line - v2 //

.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

I just tried it and it works!!! 🙂 Super excited for this. Just a few things I need to change. I'd love to make the underline appear from left to right. I'd also love that the underline stays when you are on a certain page. for instance I'm on contact and I'd love the underline to be there and not disappear. I don't know if I explained myself correctly. Thank you so so much my friend. If I can offer you a coffee send me your paypal link

I fixed the left to right thing changing margins but sometimes it's like the undeline won't disapper completely. there is a tiny line when you move toofast. super weird. Zoom under "about" and you'll see what I mean

Ok so little update, as you can see in the video I managed to do what I was looking for but the static underline is thinner than the underline hover effect. The only thing I'm able to do is to reduce the thickness of the underline hover effect to match the underline. I'm not able to just increase the thickness of the static underline. In the video I didn't do that to show you what I'd like to do instead of going for the "easy way". Although I changed it on the website 

4 hours ago, AA95 said:

Ok so little update, as you can see in the video I managed to do what I was looking for but the static underline is thinner than the underline hover effect. The only thing I'm able to do is to reduce the thickness of the underline hover effect to match the underline. I'm not able to just increase the thickness of the static underline. In the video I didn't do that to show you what I'd like to do instead of going for the "easy way". Although I changed it on the website 

 

I am so sorry that I responded so late. But your website looks amazing! It looks way better with the hover effects as well. Also im not in the mood for coffee at the moment but thank you so so much for the offer :). Do you sell food or do you just give out recipes? If you sell food/drinks I would love to buy some sometime, because it looks really good! Are there any other issues/things you want help with or changed? Thanks!

2 hours ago, inunzi said:

I am so sorry that I responded so late. But your website looks amazing! It looks way better with the hover effects as well. Also im not in the mood for coffee at the moment but thank you so so much for the offer :). Do you sell food or do you just give out recipes? If you sell food/drinks I would love to buy some sometime, because it looks really good! Are there any other issues/things you want help with or changed? Thanks!

Thank you so much, no I don't sell any food at the moment. The only thing I'll have to fix is that little dot that sometimes you can find under the nav items, the one I showed you in the video.

Do you know a code for the drop-down menu with categories? Cause at the moment I don't have many recipes but I guess that at some point I'll have to add something similar (even if I don't like it) otherwise it will take ages to find a recipe. I know there is also the search box but it takes quite a big space, that's why I had to place it at the bottom, not the most amazing place. Thanks 😊

P.S. since you were very kind by helping me out if I can return the favour somehow let me know

10 hours ago, AA95 said:

Thank you so much, no I don't sell any food at the moment. The only thing I'll have to fix is that little dot that sometimes you can find under the nav items, the one I showed you in the video.

Do you know a code for the drop-down menu with categories? Cause at the moment I don't have many recipes but I guess that at some point I'll have to add something similar (even if I don't like it) otherwise it will take ages to find a recipe. I know there is also the search box but it takes quite a big space, that's why I had to place it at the bottom, not the most amazing place. Thanks 😊

P.S. since you were very kind by helping me out if I can return the favour somehow let me know

No problem, anytime :). For the dot, that must be a glitch only on the squarespace edit page. I think this because on my side there isn't a dot when i slide fast through the navigation sections  in the header. For the second question, Do you mean a mega menu, Or something like one below? If you like the one below, I have a pretty good customization idea for the menu. "I know there is also the search box but it takes quite a big space, that's why I had to place it at the bottom, not the most amazing place." There is actually a way to add the search bar to the header via css. You could also change the sizes of the search bar as well. Would you like some help to do so? 

"P.S. since you were very kind by helping me out if I can return the favour somehow let me know"

Oh no, you don't have to give something in return at all. I just want to help people out with their site, because i want other's days to be better. So, by saying that I mean seeing that my help is working and is helping you. Is a favor it self. Oh, and do you think you can let me know to when you are selling food/drinks? Thank you!😁

5 hours ago, inunzi said:

No problem, anytime :). For the dot, that must be a glitch only on the squarespace edit page. I think this because on my side there isn't a dot when i slide fast through the navigation sections  in the header. For the second question, Do you mean a mega menu, Or something like one below? If you like the one below, I have a pretty good customization idea for the menu. "I know there is also the search box but it takes quite a big space, that's why I had to place it at the bottom, not the most amazing place." There is actually a way to add the search bar to the header via css. You could also change the sizes of the search bar as well. Would you like some help to do so? 

"P.S. since you were very kind by helping me out if I can return the favour somehow let me know"

Oh no, you don't have to give something in return at all. I just want to help people out with their site, because i want other's days to be better. So, by saying that I mean seeing that my help is working and is helping you. Is a favor it self. Oh, and do you think you can let me know to when you are selling food/drinks? Thank you!😁

Something like the one above is what I had in mind. I want to keep it as minimal as possible that's why also a menu itself is not the most appealing solution but I have no other choice. I could display the categories just like this guy did (see attachment), that's another way of doing it but whenever someone comes to my page it will see that first, instead of the food. What do you think would be better?

I don't wanna add the search bar to the css otherwise it will be too confusing with all the social links, button, logo and text. Less is more but it has to be a quick and easy website to use.

Regarding your help, I really appreciate it and you're a very kind soul. If you do some work and you want me to share it on Instagram I'd love too as long as it's not a steak house (no offense but I don't think my audience will appreciate it, as you might guess most of the people there, are vegan). I don't think I will sell food and drinks since my reason to be online is to show people how easy is to be vegan without compromising taste. Next year I'm planning to do a ebook to support the costs of the website, I wanna keep it ads free. I have a sponsor I could ask that but then you have some moral obligation towards them, you know. 

Step by step, today the website tomorrow the ebook.

Thank you🙏🏻

Andrea

7 hours ago, AA95 said:

Something like the one above is what I had in mind. I want to keep it as minimal as possible that's why also a menu itself is not the most appealing solution but I have no other choice. I could display the categories just like this guy did (see attachment), that's another way of doing it but whenever someone comes to my page it will see that first, instead of the food. What do you think would be better?

I don't wanna add the search bar to the css otherwise it will be too confusing with all the social links, button, logo and text. Less is more but it has to be a quick and easy website to use.

Regarding your help, I really appreciate it and you're a very kind soul. If you do some work and you want me to share it on Instagram I'd love too as long as it's not a steak house (no offense but I don't think my audience will appreciate it, as you might guess most of the people there, are vegan). I don't think I will sell food and drinks since my reason to be online is to show people how easy is to be vegan without compromising taste. Next year I'm planning to do a ebook to support the costs of the website, I wanna keep it ads free. I have a sponsor I could ask that but then you have some moral obligation towards them, you know. 

Step by step, today the website tomorrow the ebook.

Thank you🙏🏻

Andrea

1. Hmm I really like the button navigation better. But the menu one I had an idea since it’s vegan food. I was thinking maybe having a leaf shape like drop down menu like in the photo below.

2. Np offense taken. I understand that you are a vegan or the people you know are vegan, so you wouldn’t want anything Meat like. I also am trying to build a fashion/luxury brand so you don’t have to worry 😁.  But the button one you will definitely need block ids and would need to use css or JavaScript. 

11 hours ago, inunzi said:

1. Hmm I really like the button navigation better. But the menu one I had an idea since it’s vegan food. I was thinking maybe having a leaf shape like drop down menu like in the photo below.

2. Np offense taken. I understand that you are a vegan or the people you know are vegan, so you wouldn’t want anything Meat like. I also am trying to build a fashion/luxury brand so you don’t have to worry 😁.  But the button one you will definitely need block ids and would need to use css or JavaScript. 

Hi inunzi, how are you doing?

Thank you so much for your suggestion, I think I'll try to find a good code for the button navigation. It's really minimal and different from the usual drop menu. Regarding your website how interesting! I've seen it, for now you're selling face masks right? Are you also taking into consideration the environmental aspect of production? Cause I have a few website you could look at to take inspiration if you like the idea.

I'll keep you posted also on the button navigation, we'll see what I can find 🙂

------Update-------

Ok so I looked around for the code and I couldn't find a specific one. One I found instead is that I could add a few buttons (with the name of the categories) and make sure they stay close together just like in the screenshot I sent you. So now I'm on the hunt for a code to place all these buttons in one place with maybe a search bar too. I'm not super optimistic about that ahah

4 hours ago, AA95 said:

Hi inunzi, how are you doing?

Thank you so much for your suggestion, I think I'll try to find a good code for the button navigation. It's really minimal and different from the usual drop menu. Regarding your website how interesting! I've seen it, for now you're selling face masks right? Are you also taking into consideration the environmental aspect of production? Cause I have a few website you could look at to take inspiration if you like the idea.

I'll keep you posted also on the button navigation, we'll see what I can find 🙂

------Update-------

Ok so I looked around for the code and I couldn't find a specific one. One I found instead is that I could add a few buttons (with the name of the categories) and make sure they stay close together just like in the screenshot I sent you. So now I'm on the hunt for a code to place all these buttons in one place with maybe a search bar too. I'm not super optimistic about that ahah

I’m doing great thank you!  How about you?

And yes I am selling face masks for now. But I am trying to sell more products soon. By what kind of environmental aspect are you thinking of? And ye aye I hope you find code to fix the search bar the way you want 😅. So for the button one. You would want that to load immediately correct? Like if someone presses the button, you would want to have the page show up right after the button was clicked, instead of the page loading to another page right?

21 minutes ago, inunzi said:

I’m doing great thank you!  How about you?

 

And yes I am selling face masks for now. But I am trying to sell more products soon. By what kind of environmental aspect are you thinking of? And ye aye I hope you find code to fix the search bar the way you want 😅. So for the button one. You would want that to load immediately correct? Like if someone presses the button, you would want to have the page show up right after the button was clicked, instead of the page loading to another page right?

 

I'm doing really well, many people like the website. I launched it yesterday 🙂 
Talking about your business there are many brand carbon free certified (both the products and the production) or there are some brands which use eco friendly materials like bamboo or hemp. For instance I own a bamboo t shirt and it's not just being eco friendly but the quality is incredible. Another suggestion could be organic cotton and so on,.. I have many examples of companies who care about these stuff and I believe it to be the future. Higher the demand for these products lower the prices of the raw materials. 

Regarding my website, I would like it to behave just like when you click on the categories in the homepage right now. It loads to another page, the website is pretty fast so it won't make any difference whether is a new page or the same one.

8 hours ago, AA95 said:

I'm doing really well, many people like the website. I launched it yesterday 🙂 
Talking about your business there are many brand carbon free certified (both the products and the production) or there are some brands which use eco friendly materials like bamboo or hemp. For instance I own a bamboo t shirt and it's not just being eco friendly but the quality is incredible. Another suggestion could be organic cotton and so on,.. I have many examples of companies who care about these stuff and I believe it to be the future. Higher the demand for these products lower the prices of the raw materials. 

Regarding my website, I would like it to behave just like when you click on the categories in the homepage right now. It loads to another page, the website is pretty fast so it won't make any difference whether is a new page or the same one.

1. That is awesome I live your website. I’m soo happy that it is out for free Public. 
 

2.I really care about our earth and people, so I will definitely have healthier and safer material in my products 😁. 
 

3. that is very easy to do so. I don’t even think you need any css coding involved. Would you like me to tell you something that might work for that? Thanks!

17 hours ago, inunzi said:

1. That is awesome I live your website. I’m soo happy that it is out for free Public. 
 

2.I really care about our earth and people, so I will definitely have healthier and safer material in my products 😁. 
 

3. that is very easy to do so. I don’t even think you need any css coding involved. Would you like me to tell you something that might work for that? Thanks!

Sure I'd love to, thank you so much. My goal is to have something similar to the website I showed you.

If you have also a super minimal code for a drop down menu I'd love to try that one too so I'll be able to have an idea of what's best for my site. Not like the leaf one but more like yours or even something more minimal. Thanks 🙂

please keep me posted on you brand cause if you take that eco friendly approach I'd love to share it with my followers

On 10/5/2020 at 4:42 PM, AA95 said:

I'm doing really well, many people like the website. I launched it yesterday 🙂 
Talking about your business there are many brand carbon free certified (both the products and the production) or there are some brands which use eco friendly materials like bamboo or hemp. For instance I own a bamboo t shirt and it's not just being eco friendly but the quality is incredible. Another suggestion could be organic cotton and so on,.. I have many examples of companies who care about these stuff and I believe it to be the future. Higher the demand for these products lower the prices of the raw materials. 

Regarding my website, I would like it to behave just like when you click on the categories in the homepage right now. It loads to another page, the website is pretty fast so it won't make any difference whether is a new page or the same one.

Do you know what would be interesting to add just to keep the home page as it is? a little arrow like this one "v" under my logo and when you click on it there's a drop and the categories apper. This way I'll keep the homepage simple but functional. what do you think?

2 hours ago, AA95 said:

Sure I'd love to, thank you so much. My goal is to have something similar to the website I showed you.

If you have also a super minimal code for a drop down menu I'd love to try that one too so I'll be able to have an idea of what's best for my site. Not like the leaf one but more like yours or even something more minimal. Thanks 🙂

please keep me posted on you brand cause if you take that eco friendly approach I'd love to share it with my followers

1. I saw the other response so you don’t want the button navigation correct? 
2. would you still want a minimal drop down menu with the other design with the  arrow under the logo? 
3.I will surely! I followed you so I will always keep in touch😁. I hope you update me as well because I want to see your brand grow and become a success too! 

2 hours ago, AA95 said:

Do you know what would be interesting to add just to keep the home page as it is? a little arrow like this one "v" under my logo and when you click on it there's a drop and the categories apper. This way I'll keep the homepage simple but functional. what do you think?

That is such a genius idea! Did you find any code to do so? Because that would be such a cool plug-in to your site! It will make it more eye catching and professional too!

54 minutes ago, inunzi said:

That is such a genius idea! Did you find any code to do so? Because that would be such a cool plug-in to your site! It will make it more eye catching and professional too!

I couldn't even find the buttons let alone that crazy thing ahah I'll have to go for a drop menu which is the easiest thing to do

1 hour ago, inunzi said:

1. I saw the other response so you don’t want the button navigation correct? 
2. would you still want a minimal drop down menu with the other design with the  arrow under the logo? 
3.I will surely! I followed you so I will always keep in touch😁. I hope you update me as well because I want to see your brand grow and become a success too! 

What's your name on Instagram? So that I can contact you cause with this forum it can easily become a mess 😂😂

7 minutes ago, AA95 said:

What's your name on Instagram? So that I can contact you cause with this forum it can easily become a mess 😂😂

That is very true 😂. Because I could check and there wouldn’t be a reply so then I exit. But then I would come back 3 hrs later to find like 10 reply’s 😅. My Instagram is @official_inunzi. I’m thinking of posting products and Instagram pics soon. My Pinterest and Twitter is @inunzi. Also do you want me to try and look for the codes? Thanks!😁

9 hours ago, inunzi said:

That is very true 😂. Because I could check and there wouldn’t be a reply so then I exit. But then I would come back 3 hrs later to find like 10 reply’s 😅. My Instagram is @official_inunzi. I’m thinking of posting products and Instagram pics soon. My Pinterest and Twitter is @inunzi. Also do you want me to try and look for the codes? Thanks!😁

I texted you on Instagram 🙏🏻