Search Results for 'mobile'

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 need to disable the mobile theme: https://forum.tagdiv.com/how-to-manage-the-mobile-theme/

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

Hi,

Thant would be the normal behavior without any css to style the page on mobile screens. The theme doesn’t have an option to turn its responsiveness off and this is not an easy task so I suggest you also get someone to helps you with this and also make a backup of your current theme installation.
Sorry for the inconvenience!

Thanks for understanding!

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,

Those VC features haven’t been tested. You can use the advanced css filed from theme panel to add css that applies just the a specific device screen width.
Ex: This will hide the post title from post template 8 on mobile only: http://screencast.com/t/rmzEKl71H
You can use them and built css for the parts sections you don’t want to show on mobiles/tablets/dektop screens and add your css like in the example.
You can also use this VC general setting: http://screencast.com/t/R6d2ES9hWz and set a custom class which you can use to target and hide the sections you don’t want.
Please open anew topic and post you questions in the main forum.

Thanks