Box around header item

Hi there! Is it possible to create a box around the “book now” button in our header?

Example (our old header before pro):

New header built in pro:

Hi Ashley,

Thanks for reaching out.
I have checked and found that you are still using the X where the custom class book-now has been added to the Menu Item, and the following custom CSS code is added into the Theme Options > CSS. I would suggest you do the same by adding the custom class to menu items and add the following custom code.

.book-now 
{
    text-align: center;
    color: black;
    border: 2px solid black;
    margin-left: 10px;
    margin-top: 18px;
}

Screenshot-846-

Hope it helps.
Thanks

Thank you for your reply. I am still confused. How do I find those places that you screenshotted?

Hello Ashley,

To add the custom CSS class to the menu items you need to go to your WordPress Dashboard —>Appearance—>Menu—>Add CSS Class in the “CSS Class” box.

Now add the custom CSS code under Theme Options—>CSS

Hope it helps
Thanks

Thank you for helping me find where to add this! I was able add the code. The box is wider than I would like. How can I make it skinnier (closer to the words book now) and how can I add some white space on the bottom so the border of the box isn’t right on the edges of the header? Thank you so much for your help!

Hi Ashley,

I see the “Book Now” item on your menu, but I don’t see it having the border like on your screenshot? Are you working on a staging site, can you provide the URL and login credentials so we can take a closer look.

Thanks,

AWESOME! Thank you so much for your help. We are trying to make our whole website look great and we added two new locations to our services, so I really appreciate all of your team’s help during this busy time of changes!

You are most welcome, Ashley!

Hi again! I noticed the book now button is not showing up in the header on mobile for each of our headers.

Unfortunately I am getting this message every time I go to edit any header.
Screen Shot 2021-10-15 at 1.30.42 PM

We don’t want the front page to have a header. I noticed when I changed it to have a header, I was able to see the header builder again. Is there a way to edit headers without having one on the front page?

If not, I was trying to recreate this simple white section with the logo in the center as the header. But, I can’t figure out how to center the logo even though the container is centered.

Additionally, the logo does not even appear in the header.

Additionally, I was wondering if it were possible that the mobile hamburger menu is a square and not a circle. Screen Shot 2021-10-15 at 1.55.24 PM

Also, do you know why a gray bar is appearing above the hero image on mobile?

Thank you,
Ashley

Hello Ashley,

By default, the Header Builder will load the homepage. Since you have used the Blank - No Container | No Header, No Footer page template for your homepage, this is the reason why you are seeing the “No suitable preview…” message.

To get around, simply navigate to the lower-left corner and assign a page to preview the header.

To center your logo, you will have to click on the Container and align it to the “Center” horizontally.

And yes, you can make the Toggle menu of the as a square by disabling the border radius. Click the Navigation element and go to Menu > Toggle > Design.

The gray bar appearing above the hero image on mobile is because of this custom CSS added in line 134-136 of the Appearance > Customize > Additional CSS settings:

#x-section-1 {
    margin-top: 45px !important;
}

You will need to remove that CSS block to get rid of the gray bar.

Best Regards.