View the Booking Page on your website and scroll down the page. Do you notice the Main Menu "Book Now" text has turned green? If you hover over the text, it turns blue with an underline. Contrast this to our 5 Star Hotel online demo Booking Page, where the "Book Now" button text is consistently white on scroll.
It's important to ensure the "Book Now" call-to-action (CTA) button's font color remains consistent when visiting the Booking Page. To make this happen, the first step is to grab the Menu Item ID for the "Book Now" button. To do this:
Navigate to: your website's Homepage > right-click on the "Book Now" CTA button in the Main Menu > depending on browser, click "Inspect Element" > a browser Inspector Tool will open > in the panel that opens, you should notice the URL link to your Booking Page in the element selected (or just above it) > just above this URL link, notice text which reads [id=menu_item-XXXX], where XXXX is an unique number value > write down this Menu Item ID number.
Next, we'll edit the child theme "stylesheet" to replace our development build's "Book Now" button Menu Item ID number with your own. To do this:
Navigate to: Admin Menu > Appearance > Theme Editor > click "I Understand" for "Heads Up!" warning regarding editing theme files > in the Divi 5 Star Hotel Stylesheet (style.css file)...
a) Scroll to LINE 179 > change the number value "1871" to your unique Menu Item ID number copied above (further instructions are provided next to lines you must edit).
b) Scroll to LINE 182 > follow the same procedure and change "1871" to your unique Menu Item ID number.
c) Scroll to LINE 194 > follow the same procedure and change "1871" to your unique Menu Item ID number.
Once steps completed, click the "Update File" button at the bottom of the Theme Editor Page. A notification will appear which reads "File edited successfully".
Next, we'll ensure the "Book Now" button font color remains white when scrolling through the Booking Page. To do this:
Navigate to: Admin Menu > Pages > All Pages > View the "Booking" Page > once open, hold the SHIFT key on your keyboard while refreshing the browser window (this clears page cache) > review that the "Book Now" Menu CTA button font color stays white when scrolling through this page.
In the next article, we're going to cover creating a Contact Form for your Contact Us Page.