Header Widget "Book Online"

Hi, I am running 2 separate websites for restaurants & am new to the task with WordPress. The restaurants are www.theequinox.com.au & www.stilts.com.au. If you see on the Stilts website in the top right corner there is the "Book Online’ widget in the header. This widget links to the page to book at the restaurant. I can go in there and edit it but it is not a separate plugin or CSS, it is part of the theme of the website (not Astrid). On the Equinox site (which is Astrid) I want to have a similar, if not exactly the same, kind of widget in the same place (top right in the header). Can anybody help me with this, Is there a plugin to do this? Any feedback much appreciated!

Hello LokyGordon,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

a.custom-logo-link::after {
    background-image: url(http://www.theequinox.com.au/wp-content/uploads/2017/06/BOOK-ONLINE-WIDGET.gif);
    height: 40px;
    width: 200px;
    display: inline-block;
    content: '';
    background-size: 200px;
    background-repeat: no-repeat;
    margin-top: 25px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman, thank you very much for your fast response, however when I click on the button it just links me back to the home page not to the link where it should send me to. It is also good when I have the header centred and it is positioned underneath the logo but if I was to make the header ‘inline’ and have the logo on the left, the pages in the middle, how would I go about having the button on the right hand side? Thanks!

Hello LokyGordon,

  1. Go to your public_html/wp-content/themes/astrid folder (you can access it via cPanel or SFTP), copy header.php file to child theme (you’ll have to install it if you haven’t done it already). Open header.php file (the one that you copied to child theme) with a text editor, find this code:
<div class="site-branding col-md-4 col-sm-6 col-xs-12">
	<?php astrid_branding(); ?>
</div>

…replace it with this code:

<div class="site-branding col-md-4 col-sm-6 col-xs-12">
	<?php astrid_branding(); ?>
	<a href="https://www.dimmi.com.au/make-booking/stilts?mode=Widget" class="header-booking-button"><img src="http://www.theequinox.com.au/wp-content/uploads/2017/06/BOOK-ONLINE-WIDGET.gif" alt="Booking Button" height="40" width="200"></a>
</div>

…and save the file.

Please note that you have to override modified PHP files in a child theme in order to avoid losing modifications after theme update.

  1. Add this CSS code instead of previous:
.custom-logo-link,
.header-booking-button {
    display: inline-block;
    margin: 10px;
}

.site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

Kind Regards, Roman.

P. S.
That should be responsive, I tested it on my localhost.