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

Free and Premium WordPress Plugins & Themes Forums WordPress Themes Oceanica How do I float header and make a button for booking in header

This topic contains 3 replies, has 2 voices, and was last updated by   J. Davis 6 days, 20 hours ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #746539

    Rahmat Syaiman
    Participant

    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.

    #748908

    J. Davis
    Keymaster

    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

    #749300

    Rahmat Syaiman
    Participant

    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

    #750495

    J. Davis
    Keymaster

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.