How do I float header and make a button for booking in header

[Rahmat Syaiman]

Hello.

Please guide me how do I
– make the header floating on page scroll
– make the logo center instead of in the left, so there menu header left and right (logo in the middle)
– make the “Book Online” as a button instead of plan hyperlink

Thank you.

[J. Davis]

Hello Rahmat,

1. Currently there is no option to make header sticky by default. But you can easily adjust it using third party plugins that allows to make any selector sticky. There are even free plugin at wordpress.org

2. It is possible to move logo and place between 2 top menus overriding header.php file using Child Theme.

3. Follow the steps below to learn how to transform menu items into a button:
– navigate to Dashboard>Appearance>Menus
– select proper menu where you wish to transform menu item into a button (in case of Oceanica you should select Header Right menu)
– now look at the op corner of the screen and find Screen Options button.
– click it and enable CSS Classes option
– once it is enabled go back to menu you selected and click on Book Online item to look at its preferences
– you should be able to see CSS Classes (optional) so add the following classes – button mphb-book-button

best regards,
J.Davis

[Rahmat Syaiman]

Hi J.

Thank you for your respond.

1. Im trying to use a less plugins as possible, please guide me how instead of using another plugins.

2. Yes, I am using child theme, please guide me how.

3. This is the same as what I did, but the button does not look good, https://i.imgur.com/Go3HaNK.png

Thank you

[J. Davis]

Hello Rahmat,

1. You may apply the style below to make header sticky:

.site-header{
    background:#fff;
    position: -webkit-sticky;
    position: sticky;
    top:0;
    z-index:999;
}

2. You can select div with class site-branding and all the div it wraps, cut it off and paste after closing tag of top-navigation (and after endif as logo appearance will depend on condition)

3. You may add custom class to use with class to adjust you button e.g.

.button.mphb-book-button.book-navigation-button{
    padding:1em;
}

Than add this class to the menu item options too
button mphb-book-button book-navigation-button

best regards,
J. Davis

[Author]

Posts