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

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!

Hi,

What is site url? We can check problem easier

Of course - thanks for responding.

Site URL is https://northernhelm.com/

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.

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;
}

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

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!

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

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.

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 

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;
}