How to add Button to website header

Hi there,

this document explains how to 'style' Menu items to look like buttons:

https://docs.generatepress.com/article/adding-buttons-navigation/

Ok so I have made this button But I need some help modifying it.
this s my code

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: ff7b00;
        border: 1px solid #FF7B00;
				border-radius:100%;
        color: #fff;
			  box-shadow: -0px 3px 3px 5px #DB6600;
}
    }
}

When I am hover the button I can see the border color that is not changing to be same as the button background color, I dont know how to fix it

In this link you can check the screenshot https://imgur.com/a/4Dro7uv

Thank you

Try adding this CSS:

.main-navigation .main-nav ul li.nav-button:hover > a {
    border-color: #f26d00;
}

Thank you
Also How can I put button in mobile header instead of phone number in the photo ? https://imgur.com/a/wpSIqL7

I assume you used a Hook to add your phone number - just change the HTML to display as a button as explained here:

https://docs.generatepress.com/article/adding-buttons/

Yes I have deleted the phone number HTML But I dont know how to make the button appear there,
Please help me

In the same way you added the HTML for the phone number you just need to add the HTML for the button - in the documents i provided the example is this:

<a class="button" href="https://google.com">Button to Google</a>

If you want the button to be a phone number then it would look like:

<a class="button" href="tel:123-456-7890">123-456-7890</a>

Yes but I dont know what is the class of the button, I am not quite good in coding
https://imgur.com/a/xgf1BbO

I want the button you see in screenshot to appear in mobile instead of the phone number
How I do it ?

Hi there,

In your Hook Element, do this:

<a class="button phone-button" href="tel:123-456-7890">123-456-7890</a>

Then add this CSS:

.button.phone-button {
    background-color: #ff7b00;
    border: 1px solid #FF7B00;
    border-radius: 100%;
    color: #fff;
    box-shadow: 0px 3px 3px 5px #DB6600;
}

Let me know if this helps or not :)

Hi its strange
When I edit it via customizer in my desktop I can see it for responsive devices
But when I enter from a mobile device I cant see the button
Can you please check ?
https://edensharabi.co.il/mobile/

Yes it displays on my phone ok - you may need to clear browser caches.

But the phone number is too large and overlapping the logo and your menu toggle is also overlapping the logo - add this CSS to fix that:

@media (max-width: 768px) {
    .main-navigation:not(.slideout-navigation) .inside-navigation {
        flex-direction: row-reverse;
    }
    .site-logo {
        margin-left: 0 !important;
    }
    .button.phone-button {
        font-size: 14px;
    }
    #mobile-header .menu-toggle {
        margin-left: auto;
    }

}

I need to replace the elements here in mobile header please check the screenshot
https://imgur.com/a/baUk18x

I edited the code above

Perfect Thank you!