Additional button in desktop and mobile menu

Hi,

The current custom code applied to create a header menu button is not scalable. You need to deactivate that CSS code first by commenting it out and then paste my following CSS code:

.header-nav-list div:not(:last-child):has(a[target='_blank']) {
    position: absolute;
    right: 14rem;
}

.header-nav-list div:last-child:has(a[target='_blank']) {
    position: absolute;
    right: 0;
}

.header-nav-list a[target='_blank'], 
.header-menu-nav-wrapper a[target='_blank'] {
    display: inline-block;
    background-color: #586f79;
    padding: 10px 20px;
    border-radius: 50px;
}

@media only screen and (max-width: 1250px) {
    .header-nav-list .header-nav-item:has(+ div:not(:last-child) a[target='_blank'])  {
        margin-right: auto;
    }
}

I used a bit more advanced CSS selectors to write fewer lines of code, to make it scalable and work on mobile view too.

N.B.: At a viewport width of 1250px, the elements will overlap. To prevent this, I aligned the navbar links to the left as per the attached. Also, the above code only works on header buttons that will open a new tab when clicked.

Remember to comment out the current custom CSS codes for the header menu button first before applying my codes.

Hope this helps!

Mahmoud