Search Results for 'mobile menu'

Hi,

I have investigated this and seems that the mega menu feature it bound by the header menu id that is why the menu breaks, changing it is not simple and you would need additional customization besides changing the menu id.
You could try to add menu items for both you menu then use css to hide the ones you want only on mobiles on desktop and reverse.
Sorry for the inconvenience!

Thanks

Hi,

1&2 Search on mobile view: http://screencast.com/t/Gjz1QtC4zwA

@media (max-width: 767px){
#td-top-search {
top: 0px !important;
right: -56px !important;
}
.header-search-wrap .dropdown-menu{
right: -277px!important;
}
.header-search-wrap .dropdown-menu:before{
left: 32px!important;
}
.header-search-wrap .dropdown-menu .btn{
right: 269px!important;
}
}

3. I see that you managed to solve that: http://screencast.com/t/pKRV7x9KSv

Hi,

You can change header style to “Blog style – full text logo + menu” and I think that there wont be issues on moblie view. Any if you want to use Style 3 you can use this custom css:

To hide the main menu and place the search button on top for mobile view: http://screencast.com/t/Q2PImmCmYDWG

@media (max-width: 767px) {
#td-top-menu .sf-menu {
display: none;
}
.blog-stack #td-top-search{
right: -50px;
top: -75px;
}
.header-search-wrap .dropdown-menu {
left: -56px!important;
}
}

For tablets please use this custom css in Theme Panel > Custom Css: http://screencast.com/t/vMf2QV8vpxMx

@media (max-width: 1018px) and (min-width: 768px){
.blog-stack .sf-menu > li > a{
padding: 0px 5px 0px 5px;
}
.blog-stack .sf-menu a.sf-with-ul {
padding-right: 25px;
}
.blog-stack .sf-menu > li > a{
font-size: 12px;
}
}

Hope this helps!

Thanks!

Hi,

You can try to set you header to header style 3 then use the custom css from below to get this result: http://screencast.com/t/WPtJGwplM

@media (max-width: 767px) {
.td-menu-wrap #td-top-menu {
display: block !important;
}

#td-top-mobile-toggle {
display: none !important;
}
#td-top-search {
width: 40px;
position: absolute;
top: 0px;
right: 16px;
}
.header-style-3 .td-logo img {
position: initial !important;
width: 180px !important;
}
}

Please also note that the main menu hasn’t been designed to be used on mobile screens so you might need additional customization to it.
Regarding the second questions, in the customization above I have removed the mobile menu button as I believe you don’t need it anymore.
The icons is added using the background-image property via css: http://screencast.com/t/k6hyD03kHex You can also alter tit via css and change it or enlarge it.

Thanks

Hi,

The logo issue you have is because you use a large logo img and which on mobile screens id set to a 180px width and behaves as in your case.
You can adjust it and make it look better via css, like this: http://screencast.com/t/vrjChmttUD67
You also need to remove or change the header color, use the css below and set the color as you like. It will have to be different form blue because the logo is also blue and different from white because the menu icon and search icon are also white.
You can also set the menu color to black from theme panel: http://screencast.com/t/nUvQUIFd

@media (max-width: 767px) {
.td-boxed-layout .td-menu-placeholder .td-menu-background .td-menu-wrap {
background: red !important;
}
.header-style-3 .td-logo img {
width: 380px !important;
top: -1px !important;
}
}
@media (max-width: 500px) {
.header-style-3 .td-logo img {
width: 300px !important;
top: 5px !important;
}
#td-top-search {
right: -40px !important;
top: -57px !important;
}
}
@media (max-width: 400px) {
.header-style-3 .td-logo img {
width: 250px !important;
top: 8px !important;
}
}

The itemprop="interactionCount" meta tags are added and used for the comments counter from modules: http://screencast.com/t/MgwNRmvLQLzi
To remove it please comment this line: http://screencast.com/t/3iTGxtlTs

Thanks

Thanks Chris!
Replied here: https://forum.tagdiv.com/topic/mobile-menu-problem-2/#post-35691

Hi,

The menu is showing those duplicated items because you have set them to use the mega menu which by default it displays the subcategories of a category and you’ve also set the subcategories as sub items which is not necessary when using mega menu so you can noticed that you gave the same issue as on mobiles on desktop also: http://screencast.com/t/ptRri7ezfT
You need to remove this ones: http://screencast.com/t/RPRkEEFlnkdD from appearance > menus panel leaving just the category set to use the mega menu: https://forum.tagdiv.com/how-to-use-the-megamenu/

Thanks

• This reply was modified 11 years by Lucian.

Hi,

Theme was designed to not show top menu on mobile view and there is no option for this.
Please use this custom css: http://screencast.com/t/BYx45vKqIg

@media (max-width: 767px){
.td-header-menu-wrap {
display: block;
font-size: 11px;
}
.top-header-menu, .td-header-menu-wrap .menu-post-and-page-settings-container .menu {
margin-left: 0px;
}
.top-header-menu li a, .td-header-menu-wrap .menu-post-and-page-settings-container .menu li a {
padding: 0px 2px 0px 2px;
}
}

Thanks!

• This reply was modified 11 years by Alin [tagDiv].
• This reply was modified 11 years by Alin [tagDiv].

Hi,

If you want more subcategories to appear on mega menu please edit td_menu.php and change this value: http://screencast.com/t/8W8tr3V6f and for mobile: http://screencast.com/t/Qbh8JUaENhX

Result: http://screencast.com/t/9RJ0GGRJsLz

Thanks!

• This reply was modified 11 years by Alin [tagDiv].

Hi,

I have checked your site and noticed this js errors in your console which can cause this as the mobile menu works based on js: http://screencast.com/t/bxcc6028AbuB
Please try to check this without any other plugins active lave just the Visual Composer plugin active, empty cache and also purge files if you use any CDN host services and check again. Enable plugins one by one afterwards to find the one that is causing this issues.
Please let me know!

Thanks