You have to modify your header.php and main.css files.
header.php:
Find <body <?php bender_body_class(); ?>>. Modify the code after it to look like this:
<div id="header">
<!-- header ad 728x60-->
<div class="ads_header">
<?php echo osc_get_preference('header-728x90', 'bender'); ?>
<!-- /header ad 728x60-->
</div>
<div class="clear"></div>
<div class="wrapper zo-mobile_header_wrap">
<div id="logo">
<?php echo logo_header(); ?>
<span id="description"><?php echo osc_page_description(); ?></span>
</div>
<div id="zo_mobile-logo">
<?php echo '<a href="'.osc_base_url().'">CP</a>'; ?> <!--- PUT YOUR MOBILE LOGO HERE! -->
<?php //echo '<a href="'.osc_base_url().'"><img src="IMAGE_URL"></a>'; ?>
</div>
<div id="zo_mobile-header-menu">
<div class="zo_mobile-dropdown">
<a href="#" class="zo_mobile-dropbtn">
<i class="fa fa-bars fa-lg"></i>
</a>
<div class="zo_mobile-dropdown-content">
<?php if( osc_users_enabled() ) { ?>
<?php if( osc_is_web_user_logged_in() ) { ?>
<a href="#"><?php echo sprintf(__('Hi %s', 'bender'), osc_logged_user_name() . '!'); ?> </a>
<a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account', 'bender'); ?></a>
<a href="<?php echo osc_user_logout_url(); ?>"><?php _e('Logout', 'bender'); ?></a>
<br>
<?php } else { ?>
<a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login', 'bender') ; ?></a>
<?php if(osc_user_registration_enabled()) { ?>
<a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Register for a free account', 'bender'); ?></a>
<?php }; ?>
<br>
<?php } ?>
<?php } ?>
<?php
osc_reset_static_pages();
while( osc_has_static_pages() ) { ?>
<a href="<?php echo osc_static_page_url(); ?>"><?php echo osc_static_page_title(); ?></a>
<?php
}
?>
</div>
</div>
<div class="zo_mobile-dropdown" id="zo_mobile-language-dropdown">
<a href="#" class="zo_mobile-dropbtn">
<i class="fa fa-globe fa-lg"></i>
</a>
<div class="zo_mobile-dropdown-content">
<?php while ( osc_has_web_enabled_locales() ) { ?>
<a href="<?php echo osc_change_language_url ( osc_locale_code() ); ?>"><?php echo osc_locale_name(); ?></a>
<?php } ?>
</div>
</div>
<a class="zo-mobile-post-ad-btn" href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e('Post ad', 'bender'); ?></a>
</div>
<ul class="nav">
<?php if( osc_is_static_page() || osc_is_contact_page() ){ ?>
<li class="search"><a class="ico-search icons" data-bclass-toggle="display-search"></a></li>
<li class="cat"><a class="ico-menu icons" data-bclass-toggle="display-cat"></a></li>
<?php } ?>
<?php if( osc_users_enabled() ) { ?>
<?php if( osc_is_web_user_logged_in() ) { ?>
<li class="first logged">
<span><?php echo sprintf(__('Hi %s', 'bender'), osc_logged_user_name() . '!'); ?> ·</span>
<strong><a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account', 'bender'); ?></a></strong> ·
<a href="<?php echo osc_user_logout_url(); ?>"><?php _e('Logout', 'bender'); ?></a>
</li>
<?php } else { ?>
<li><a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login', 'bender') ; ?></a></li>
<?php if(osc_user_registration_enabled()) { ?>
<li><a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Register for a free account', 'bender'); ?></a></li>
<?php }; ?>
<?php } ?>
<?php } ?>
<?php if( osc_users_enabled() || ( !osc_users_enabled() && !osc_reg_user_post() )) { ?>
<li class="publish"><a href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish your ad for free", 'bender');?></a></li>
<?php } ?>
</ul>
</div>
main.css:
Add this CSS to the bottom:
ul.r-list li span.collapse, #zo_mobile-logo, #zo_mobile-header-menu {
display: none;
}
@media all and (max-width: 740px) {
/* HEADER */
#logo {
display: none;
}
.zo-mobile-head-wrap {
display: flex;
}
#zo_mobile-logo {
display: inline-block;
font-size: 1.7em;
letter-spacing: -0.07em;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 10px;
color: #fff;
font-family: "Osclass";
border: none;
line-height: 1.5em;
}
#zo_mobile-logo a {
font-size: 1.5em;
line-height: 0.8em;
font-weight: bold;
text-decoration: none;
color: #fff;
}
#zo_mobile-header-menu {
flex: 1;
display: inline-block;
padding-top: 6px;
padding-bottom: 10px;
margin-left: 10px;
border: none;
float: right;
}
.zo_mobile-language-dropdown {
display: none !important;
}
.zo_mobile-dropdown {
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.zo_mobile-dropdown .zo_mobile-dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 5px;
background-color: inherit;
font-family: inherit;
margin: 10px;
}
.zo_mobile-dropdown:hover .zo_mobile-dropbtn {
background-color: #fff;
color: #35C3D9;
}
.zo_mobile-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: 0;
}
.zo_mobile-dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.zo_mobile-dropdown-content a:hover {
background-color: #ddd;
border-bottom: 2px solid #35C3D9;
}
.zo_mobile-dropdown:hover .zo_mobile-dropdown-content {
display: block;
}
.zo-mobile-post-ad-btn {
background-color: #35C3D9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35C3D9),color-stop(100%, #18a7be));
background-image: -webkit-linear-gradient(top, #35C3D9,#18a7be);
background-image: -moz-linear-gradient(top, #35C3D9,#18a7be);
background-image: -ms-linear-gradient(top, #35C3D9,#18a7be);
background-image: -o-linear-gradient(top, #35C3D9,#18a7be);
background-image: linear-gradient(top, #35C3D9,#18a7be);
border: solid 1px #1f91a3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
display: inline-block;
vertical-align: middle;
color: #fff !important;
text-decoration: none;
padding: 10px;
box-shadow: inset 0 1px 0 0 #a0e3ed;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
margin-right: 10px;
}
/* END HEADER */
}
Try to use the code and adjust it to fit you. I can't help you much more...
Regards.
