Top menu in mobile version

Posted in: Newspaper
Post count: 17

Hi,

Thanks for developing this great theme. I have just bought the theme. I want the top menu in the mobile version too. I have used custom css mentioned here in old comments asked by the buyers. But the css isn’t working with me. Let me know how to do it.

Thank you.

Post count: 23312

Hello chand3g,

The top menu does not appear on the mobile version by default. This was a design choice. It can however be activated with custom css:

@media (max-width: 767px){
.td-header-top-menu-full {
display:block!important;
}
.td-header-sp-top-menu{
display:block!important;
}
.td-header-sp-top-widget{
display:none!important;
}
}

The result you should see here -> http://screencast.com/t/VIQA4SZydh

Thank you for the message!

Post count: 17

Hi Catalin,

I think, you didn’t read my message, what I have written.

I have already used the CSS you have suggested to other buyers but that CSS is not working with me. It doesn’t do any changes in my output.

Let me know what to do?

Post count: 23312

Hello chand3g,

Please provide your website URL so I can inspect it closer and I will be able to provide a more accurate response. The code that I gave you above have to be changed according to header style used by you.

Thank you for the message!

Post count: 17

Hello Catalin,

Thanks for quick response.

Here is the link: http://sittypitty.com

Post count: 17

Catalin,

Also, I would like to share here that style.css is getting unresponsive when I open it in the WordPress editor. I have purchased the theme then it doesn’t happen with me. Is there any issue in the theme version at the moment?

Let me know how to resolve it.

Post count: 23312

Hello chand3g,

I have checked your website and saw that you are using Header Style 8. Please try the code below and add it in Theme panel->Custom CSS area and then your top bar menu will be displayed in the mobile version.

The code is ->

@media (max-width: 767px){
.td-header-top-menu-full {
display:block!important;
}
.td-header-style-8 .td-header-top-menu {
display: block!important;
}
.td-header-sp-top-menu {
display: block !important;
}
.td-header-style-8 .td-header-top-menu {
margin-left:0;
width: 100%;
}
}

The result you should see here -> http://screencast.com/t/MRdAUcys3PK

For your second request, unfortunately, I do not understand very good on what you are referring to. Please provide more details about your desired changes so I will be able to provide a more accurate response.

Thank you for the message!

Post count: 17

Hello Catalin,

How to change the height of the top menu because it covers a lot of space on small screens.

I haven’t do any changes in the style.css but when I open it in WordPress editor, it gets unresponsive. It looks that the file is getting slow from any other load. If it gets down, the chances of site’s downtime could be maximum.

I just want to know, is there any issues with this file when it is opened in wp editor.

Thank you.

Post count: 23312

Hello chand3g,

If you want to change the height of the top menu, please try the code below. You have to edit the paddings to be 0.

@media (max-width: 767px){
.td-header-style-8 .td-header-top-menu {
padding:0;
}
}

For your second request, I have tested on my side and everything it ok with style.css. http://screencast.com/t/JnvylU3hN6a If your style.css is minified, your code will be messy and probably the code appears like this -> http://screencast.com/t/RH1Y23NIzt

Thank you for the message!

Post count: 17

Thank you, Catalin.

You have resolved my first issue completely.

For my second one, the style.css is not minified. But okay. I try to resolve it myself. It looks, It is a big file and that’s why it is getting unresponsive.

Thank you for your kind support.

Post count: 159

hello… is there a way to add padding to the left and right of the top menu. My links are currently right up against the edge of the page.

Thanks!

IC

Post count: 23312

Hello InstallationComplete,

Please provide your website URL so I can inspect it closer. I need this to offer a more accurate code.

Thank you for the message!

Post count: 159

Catalin, Do you have an email address I can send the URL to?

Thanks!

Post count: 23312

Hello InstallationComplete,

Yes. Please send us an email at contact@tagdiv.com and also, please provide a link of this topic so we can know who you are and what the issue is.

Thank you for the message!

Post count: 68


@media
(max-width: 767px){
.td-header-top-menu-full {
display:block!important;
}
.td-header-sp-top-menu{
display:block!important;
}
.td-header-sp-top-widget{
display:none!important;
}
}

Hi Catalin,

I have applied this code and my top menu appears on mobile. When the device is vertical – on the home page and posts, the menu is aligned left. On regular pages, it is aligned center which is preferable. On categories, it shows only the social.

Any way to apply CSS that would make the home page and posts have the centered menu? And also for categories to show the menu items instead of social?

site – comics2film.com
Inner page example – http://www.comics2film.com/comic-con-dates-schedule-locations-news/
Post example – http://www.comics2film.com/marvel/daredevil/daredevil-season-2-episode-7-semper-fidelis-review/
Thanks

Post count: 23312

Hello TheRiz,

Please try to use the code below to align the top bar menu. Also, please notice that is the same code for each page/post/category page and it is not a simple task to change the functionality to appear namely an option depending on what page you are and for achieving this involves custom work. If you want to display more levels in the theme and you are not aware to the steps in this regard, please consider hiring a freelancer/developer to help you because we cannot provide custom services at the moment, sorry!

The code is ->

@media (max-width: 767px){
.td-header-top-menu-full {
display:block!important;
}
.td-header-sp-top-menu{
display:block!important;
}
.td-header-sp-top-widget{
display:none!important;
}
.td-header-sp-top-menu{
margin-right: auto;
margin-left: auto;
width: 100%;
}
}

The result you should see here -> http://screencast.com/t/SCZwEgXm

Thank you for your understanding!

Post count: 68

Hi Catalin – thanks for the amazing support as usual!

I have applied this code and cleared all caches, and it is now displaying on category pages etc. as well.

However, it does not appear centered as you have it in the screenshot. Tried on multiple browsers. Any ideas?

Again, thank you for the outstanding responses.

Post count: 23312

Hello TheRiz,

Please try the code below and place it in Theme panel->Custom CSS area.

The code is ->

@media (max-width: 767px){
.td-header-sp-top-menu {
text-align: center!important;
}
}

The result you should see here -> http://screencast.com/t/7rn1TdhUBvwF

Thank you for the message!

Post count: 68

Thanks for the reply. I implemented this CSS and the menu is now centered, however it does not appear in-line as it does in the screencast.

This is not a big deal however, I can try to figure that out later if it’s too much trouble.
Thx

Post count: 80

Obrigado, eu estava procurando por isso. Mas essa informação deveria estar mais facil de se encontrar. Imagino quantas pessoas ja pediram para o Top Menu aparecer no Mobile.

Post count: 6535

Hi


@TheRiz
The code provided by Catalin works fine but the alignment also depends by mobile devices width. There might be necessary a custom rule for a specific width in order to achieve the desired rezult.


@pedroarmindo1
please address us in English next time as we don’t speak Portuguese and it’s hard to understand your requests.
The top menu wasn’t designed to be displayed on mobile devices so usually it’s necessary a custom code depending by top menu layout.

Thanks!

  • This reply was modified 10 years by Andrei L..
Post count: 80

OK sorry. For me it is working. But I believe that this should become clearer on the subject of support, so people would find the fastest solution.

Another thing I want to center the menu. See how today is http://www.eusouandroid.com

Post count: 22421

Hi,
You can use this css to center the top menu:
@media(max-width:767px){
.top-bar-style-1{
margin-left: auto;
margin-right: auto;
display: table;
}}

Thanks

Post count: 80

It was not yet centralized. I do not know if I understood well. I put the custom CSS and stayed that way

http://prntscr.com/asmzhk

/* INICIO Mostrar TOP Menu Mobile */

@media
(max-width: 767px){
.td-header-top-menu-full {
margin-left: auto;
margin-right: auto;
display:block!important;
}
.td-header-sp-top-menu{
margin-left: auto;
margin-right: auto;
display:block!important;

}
.td-header-sp-top-widget{
margin-left: auto;
margin-right: auto;
display:none!important;
}
}
/* FIM Mostrar Menu Mobile */

Post count: 22421

Hi,
But what about the code I provided above? I do not see it anywhere in the code you showed. Please add the code from my previous reply as it worked when I created it: http://screencast.com/t/gyiJeX8s6t
If you do not use the code I provide, then how is it supposed to change anything?
Thank you!

Viewing 25 posts - 1 through 25 (of 26 total)
The forum ‘Newspaper’ is closed to new topics and replies.