Button in header for Unite WordPress theme

Unite Theme
1

First off, thanks for the wonderful theme. It looks great!

I am using this theme for a bed and breakfast, sunrisehollow.com, and I would like to place a big button at the top right of the header bar, where the social icons usually are. The button should link to my reservation system. Right under or next to the button, I would like to display my phone number (I got a hint how to do this from another forum post, but as it is now, it’s in the way of where I want the button to appear). Any hints on how to accomplish this? Many thanks!

2

I have run into a few other strange issues:

  • The documentation says we can use any image size for the featured slider images. But I used 1000px by 750px, and there is an ugly gray bar on the right of the slider. I hope I don't have to resize all my images. Is there another way to fix this?
  • In my menu, I have assigned a page as a sub-item of top-level page. The website will no longer let me click on the top-level page in the menu bar.
  • I have used a dropdown-header item in my menu, but the styling looks different from the other menu items. It is lower than the others.

Thanks in advance for your help!

3
  1. You can create button like this:

Larger button
<a href="http://google.com" class="btn btn-danger btn-lg" role="button">Reservation</a>

Smaller button
<a href="http://google.com" class="btn btn-danger" role="button">Reservation</a>

Add it right below your phone number.

  1. Yes, you can use any image size since slider can be used in other places than just home page, so slider might be added in widgets and there is no need for huge images. Upscaling images via code is not how they things are done and you will have to recreate your images or otherwise they will look distorted when upscaling via code. I don’t think you want that.

  2. It is made for use on mobile as this theme is built mobile-first. Here you can read more about it and “fix” it if you want.

  3. Don’t use dropdown-header shortcode as it suppose to do completely different thing. In your case you need to follow basic menu setup and don’t over complicate things where it is not necessary.

4

Aigars, thanks for your timely response! I only have time once a week to work on this site which is why it’s taken me so long to reply.

  1. Where do I put the code for the button? I added the phone number by using this code in Unite theme’s custom CSS:
.social:before {
    content: "Call Us: 435-000-0000";
    font-family: Baskerville;
    font-size: 24px;
    color: #54397E;
    display: block;
}

I don’t see how the code you gave me will fit in there. Is there another way of adding the button and phone number?

  1. I don’t want to make my images bigger. I just want to get rid of the gray bar that appears in my image slider. Do I need to use a specific aspect ratio or something?

  2. I commented in the post you linked to. The suggested code to add to Jetpack’s custom CSS did not work for me. However, I have now realized that I probably don’t want to “fix” it after all since mobile users would be unable to get to lower menu items. Now that I know how to create custom links for top level menu items, I think I will handle it that way instead.

  3. The only reason I tried using a dropdown-header shortcode is because of the issue in #3 in which pages used as top-level menu items cannot be clicked on to go to that page. Looking at the help page you linked to, I now see that I need to create a custom link that has no link—not very intuitive, but thanks for the info!

5

On #2, I have discovered that the gray bar only appears when I stretch my browser window to a certain width. If I make the browser window more narrow, the gray bar disappears. This seems to be a flaw to me.

6
  1. Then add my previously given button code inside header.php right below this code.

<?php unite_social(); // Social icons in header ?>

  1. Add this CSS to Appearance - Theme Options - Other - Custom CSS.
.carousel-inner .item img, .carousel-inner .item a img {
    width: 100%;
}

However, uploading a more narrow and wider images wouldn’t hurt either but above mentioned code should work just fine.

7

I have tried this method of adding a button below the social icons, however the button does not appear below the icons. And, when at mobile size screen, the button is ALMOST where I would like, but not quite.

I have attached some screenshots.

R

8

I think I have it working with positioning CSS. Just know that simply pasting button code in the header.php where you stated does not make it align correctly.

9

@ryanclarkdesign

This support thread is one year old and also marked as resolved. Please start your own thread and we will help you from there.

Sorry for inconvenience.