Sunway Theme – How to add info bar to top?

One of Sunway – Hotel Booking WordPress Theme users asked to add an info bar to top of the page, so simply follow the steps below.

1 – includes/primary-menu-classsic.php add following HTML after line 10

<div id="top-info-bar" class="top-info-bar content-font">
    <div>
        Add your HTML here
    </div>
</div>

2 – css/style-classic-menu.css add folowing CSS end of the file.

/**
Top Info Bar
*/

.top-info-bar {
    position: fixed;
    background-color: #000;
    color: #fff;
    width: 100%;
    height: 32px;
    line-height: 32px;
    z-index: 3;
    transition: all .25s linear !important;
}
body.has-top-info-bar .nav-container {
    transition: all .15s linear !important;
}
.top-info-bar > div {
    max-width: 1212px;
    margin: 0 auto;
}

.top-info-bar.hidden {
    margin-top: -32px;
}

/*if admin bar is active*/
body.admin-bar.has-top-info-bar .top-info-bar {
    top: 32px;
}
/*no admin bar?*/
body.has-top-info-bar .top-info-bar {
    top: 0px;
}

/*hide top info bar on scroll and change main menu top position*/
body.admin-bar.has-top-info-bar.hide-top-info-bar .top-info-bar,
body.has-top-info-bar.hide-top-info-bar .top-info-bar {
    top: -32px;
}
body.admin-bar.has-top-info-bar.hide-top-info-bar .nav-container {
    top: 32px;
}
body.has-top-info-bar.hide-top-info-bar .nav-container {
    top: 0px;
}

/*if admin bar is active, so change top position of main menu*/
body.admin-bar.has-top-info-bar .nav-container {
    top: 64px;
}
/*no admin bar?*/
body.has-top-info-bar .nav-container {
    top: 32px;
}

@media only screen and (max-width: 1024px) {
    .top-info-bar > div {
        padding: 0 30px;
    }
}
@media only screen and (max-width: 768px) {
    .top-info-bar > div {
        padding: 0 20px;
    }
}

3 – functions/functions.php add following code after line 372

// Has info bar?
$_classes.= ' has-top-info-bar';

4 – scripts/sunway.js add following lines after 661

/* Top Info Bar */
if(jQuery(window).scrollTop() >= 150) {
    jQuery('body').addClass('hide-top-info-bar');
}else{
    jQuery('body').removeClass('hide-top-info-bar');
}

You can always submit tickets via https://freevision.ticksy.com if you have further questions.