Advertisement:

Author Topic: There is no menu option in header in mobile version  (Read 713 times)

vivekshan

  • Full Member
  • ***
  • Posts: 109
There is no menu option in header in mobile version
« on: October 30, 2018, 10:49:25 pm »
There is no menu option present in header section in mobile version
if my website is browsed on desktop then menu is present like login,register,publish links are there

but if my website is browsed on mobile then there is no links in header

only links are there in footer section

i want to show links of login,register,publish in menu in my bender theme just like osclasswizard theme

please help.

omid_firoznia

  • Newbie
  • *
  • Posts: 37
Re: There is no menu option in header in mobile version
« Reply #1 on: January 21, 2019, 03:27:20 am »
Hi

yes, i need help about that too.

I put my menu header.php in /themes/bender/header.php  i mean i add some code to header.php that my menu show on header it is show on desktop version but in mobile version i got problem , it show the menu but does not open it. i attach the pic.

I think we must change some thing in themes/bender/sass/responsive/  or ...  i do not know, please help to make it good view in mobile.

thanks a lot


WEBmods

  • Hero Member
  • *****
  • Posts: 872
Re: There is no menu option in header in mobile version
« Reply #2 on: January 21, 2019, 12:35:53 pm »
Hello,

I once made a menu and a language chooser in the mobile header for Bender theme. Don't have the code but I'll try to find it if you like it:



Regards.

omid_firoznia

  • Newbie
  • *
  • Posts: 37
Re: There is no menu option in header in mobile version
« Reply #3 on: January 23, 2019, 05:36:40 pm »
hi

thanks , that is great. i ll appreciate that if you do.
right now in bender the publish add button also dose not show in mobile version, but in the picture you send its have that in mobile version and that is very good.

WEBmods

  • Hero Member
  • *****
  • Posts: 872
Re: There is no menu option in header in mobile version
« Reply #4 on: January 25, 2019, 01:49:13 am »
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:

Code: [Select]
<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() . '!'); ?>  &middot;</span>
                    <strong><a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account''bender'); ?></a></strong> &middot;
                    <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:

Code: [Select]
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.