Search Results for 'mobile menu'

Hi,

Please use this custom css to fix this:

@media (max-width: 767px){
.td-header-bg .header-style-3 .td-logo img {
position: fixed;
top: 3px;
z-index: 3;
width: 180px;
height: 48px;
}

.td-menu-placeholder .td-affix {
height: 48px;
z-index: 2 !important;
position: fixed !important;
}
}

Should work like this: http://screencast.com/t/OTIVJzbYW8p
The logo looks like that because of it’s original size, try to add an logo for mobile from theme panel.

Thanks

Hi,

The menu loaded on mobile screens it’s different in appearance and functionality from the one used for the tablets and desktop screens so the mega menu dose not work on mobiles. In order to have an category with it’s subcategories you will have to add them like this: http://screencast.com/t/y9FnwtA0g which will be displayed like this in the mobile menu: http://screencast.com/t/lh5kwtedaaUP
If you decide to use the mega-menu to display a category with subcategories you will not have the subcategories displayed in the mobile menu.
A workaround would be to add the category twice in the menu from appearance > menus, once to display the subcategories as a mega menu and once to to add the subcategories as sub-items then use custom css to hide one on desktop/tablets and the other on mobiles.
Sorry about the inconvenience.
Hope this helps!

Thanks

• This reply was modified 11 years by Lucian.

Hi,

Sorry for the delay on which I’m answering.

@dexterion
Please send an e-mail at contact@tagdiv.com so we can send you a fix for this. Please note in your message this issues details or send a link to this topic.

@Ljubisa B.
Do you still have this issue? I have checked your site and found no issue with the mobile menu icon: http://screencast.com/t/RNDMJRoF1z6U

Thanks

Hi,

Use this css to make the logo look like this: http://screencast.com/t/22Ydp8GV7a3R

.mobile-logo-wrap img {
height: 100% !important;
width: auto !important;
top: 0px !important;
}

@media (max-width: 767px) {
  .td-menu-wrap {
height: 55px !important;
}  
}

Change the values as you like.
Regarding the “menu icon” I have noticed that it’s there now: http://screencast.com/t/DJlgZSaviL also looks like it should. Please let me know if you have any other issues with this.

Thanks

Hi,

Follow these steps:

1. First you have to register the new-menu, for that go to td_menu.php file and add this line: http://screencast.com/t/WJy9nhodUS

'header-menu-login' => __( 'Header Menu login (main)', TD_THEME_NAME),

You will get this result: http://screencast.com/t/ihF4cmqRgq

2. Secound go to menu-header.php file and add this condition like, this: http://screencast.com/t/OtKQsOJosx0

if ( is_user_logged_in() ) {
                                wp_nav_menu(array(
                                    'theme_location' => 'header-menu-login',
                                    'menu_class'=> 'sf-menu',
                                    'fallback_cb' => 'td_wp_page_menu',
                                    'walker' => new td_tagdiv_walker_nav_menu()
                                ));
                            } else {
                                wp_nav_menu(array(
                                    'theme_location' => 'header-menu',
                                    'menu_class'=> 'sf-menu',
                                    'fallback_cb' => 'td_wp_page_menu',
                                    'walker' => new td_tagdiv_walker_nav_menu()
                                ));
                            } 

3. Do the same for mobile menu, into menu-mobile.php file: http://screencast.com/t/3CQa5fpkw

if ( is_user_logged_in() ) {
            wp_nav_menu(array(
                'theme_location' => 'header-menu-login',
                'menu_class'=> '',
                'fallback_cb' => 'td_wp_no_mobile_menu'
            ));

        } else {
            wp_nav_menu(array(
                'theme_location' => 'header-menu',
                'menu_class'=> '',
                'fallback_cb' => 'td_wp_no_mobile_menu'
            ));

        }

After this set which menu you want for logged visitors and which for unregistered visitors and test it.
Hope this helps!
Sorry for the delay!

Thanks

Hi,

Please add this custom css in theme panel > custom css:

@media (max-width: 767px) {
.td-menu-background {
z-index:2;
}
.header-style-3 .td-logo img {
height: 48px;
top: 0px;
position: fixed;
width: 180px;
}
}

Modify the height and the width to enlarge the logo on mobile screens.
Should work like this: http://screencast.com/t/fcPUHPX2drG1

Thanks

Hi,

You can change the menu icons color to white from theme panel like this: http://screencast.com/t/1NZufAorUmcP you will get this result: http://screencast.com/t/uUrJNxtxw

Hope this helps!
Thanks

Hi,

Please send me your site’s URL, I need to inspect this so I can provide you a fix.
Or try to replace the css which centers the menu and use only this one:

#td-top-menu .sf-menu {
    display: table;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Should’n affect the menu on mobile: http://screencast.com/t/EOBRjXJzr4Y
Just center it on other screens: http://screencast.com/t/kTql787mh1ll

Thanks

Hi,

Add this css or just add the width: 150px !important; to the previsious custom css i gave you:

@media (max-width: 767px){
.mobile-logo-wrap img {
width: 150px !important;
}
}

Should solve it http://screencast.com/t/b9dHstBboWKQ
Thanks

• This reply was modified 11 years by Lucian.

Hi,

Thanks @TheMediumUTM, that’s right!!

@sbo
You would have to use a more specific selector, try using this id #td-top-mobile-toggle on mobile, like this:

@media (max-width: 767px) {
   #td-top-mobile-toggle .sf-menu {
    display: block;
    float: left !important;
    margin-left: 0px;
    margin-right: 0px;
}

This way you will select only the mobile menu and the other will remain hidden like it should and you will be able to center the menu as you like but you will also have to center or work on the search icon also.

Thanks

Hi,

@Joe Jerde
Please try this custom css in Theme Panel > Custom CSS:

@media (max-width: 767px){
.mobile-logo-wrap img {
top: 1px !important;
height: 100%;
}
}

Hope this helps!
Thanks

• This reply was modified 12 years by Lucian.