[Resolved] How to add Button to website header

[eden]

Hello I would like to add button to header and I dont know how to do it.
For example I would like to make a button similar to this https://imgur.com/a/ezNflzX

[David]

Hi there,

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

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

[eden]

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

[David]

Try adding this CSS:

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

[eden]

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

[David]

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/

[eden]

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

[David]

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>

[eden]

Yes but I dont know what is the class of the button, I am not quite good in coding

View post on imgur.com

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

[Tom]

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 🙂

[eden]

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/

[David]

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

}

[eden]

I need to replace the elements here in mobile header please check the screenshot

View post on imgur.com

[David]

I edited the code above

[eden]

Perfect Thank you!

[Author]

Posts