Jump to content

How to prevent 2nd button from overlapping in main navigation bar using CSS

Go to solution Solved by tuanphan,

Recommended Posts

Hi there!

Using a bunch of existing CSS code in these forums, I've been able to finagle a Main Navigation page into a 2nd button on the right side of the nav bar with the same style as the 1st button.

I'm having 3 issues in finalizing things:

  1. The hover code I've entered doesn't result in the same effect as the 1st button. I'd like the 2nd button to mimic the same hover effects as that 1st button.
  2.  When the window gets resized, the 2nd button overlaps onto the 1st button and social links.
  3. In mobile, there is no 2nd button! The page link just reverts back to being a plain old page under the menu hamburger. Ideally the 2nd button appears under the Shop Now 1st button in mobile.

Any help on this would be killer!

Link to comment

Currently I see both overlap together. I see you used position absolute to move last item to right of header, but this will make overlap on some smaller screen sizes.

image.png.1c9c3e412f71d4cb7aad6c05eb406b37.png

You can use this guide to add second button, it would be better

#1. Use this CSS code for hover effect

div.header-nav-item:last-child:hover {
    background-color: white;
}
div.header-nav-item:last-child:hover>a {
    color: black !important;
}

image.png.68f7285c9039cefe87e1bbf3a7ae96a9.png

#2. #3. You can consider this guide to achieve second button

 

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

Hey there - Thanks a ton for responding and cleaning up some of the custom CSS code.

Still having some issues getting the 2nd button moved over to the right with the new guide. I'd like the 2nd button to be to the right of the 1st button, but the new code keeps it with the main navigation pages on the left.

Secondly, I'm having issues achieving the same button style/format as the 1st button. 

The goal is to get the 2nd button moved to the right of the page, not overlap on the 1st button with page resizing, and match the same style as the first button.

Let me know if you can help out!

Link to comment
On 1/18/2024 at 3:29 AM, GNCD said:

Hey there - Thanks a ton for responding and cleaning up some of the custom CSS code.

Still having some issues getting the 2nd button moved over to the right with the new guide. I'd like the 2nd button to be to the right of the 1st button, but the new code keeps it with the main navigation pages on the left.

Secondly, I'm having issues achieving the same button style/format as the 1st button. 

The goal is to get the 2nd button moved to the right of the page, not overlap on the 1st button with page resizing, and match the same style as the first button.

Let me know if you can help out!

Which code did you use? You should use #2 code

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
  • Solution
On 1/23/2024 at 4:08 AM, GNCD said:

Ok great that did the trick!

Any tips on how to add space between the two buttons? 

They're a little too close to each other.

That should be the last piece of the puzzle.

You can add this to Custom CSS box

div.header-display-desktop a.btn {
    margin-left: 20px !important;
}

 

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
  • 3 months later...
On 5/7/2024 at 1:42 PM, RebekahS said:

Hello 

 

I'm trying to do similar! 

My website is: https://www.ritaandfrank.com.au/

I am trying to add a second button next to "login" 

I have used code in the above post to turn "contact us" into a button but cant figure out how to reposition. 

Note I'm on a basic plan 

You mean make button - other nav links on same row?

You can use this code to Website > Website Tools > Custom CSS

nav.header-nav-list {
    flex-wrap: nowrap;
}

 

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

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.