Mobile Menu View

Posted in: Newsmag
Post count: 4

Hi, below is the desktop version of newmindjournal.com

Please guide me with making the circled menu visible for the mobile version, it gets lost when scaling down as seen below, thank you.

Post count: 6535

Hi

I am not very sure what you mean by circled menu so please provide more specific details about desired rezult and maybe we can help.
Thanks!

Post count: 4

Hi—my photos did not upload for some reason. Please visit newmindjournal.com
The above menu (home, about, submit news, support, contact, etc) gets lost in mobile view. How can I make it visible in mobile view, thank you Andrei!

Post count: 23312

Hello johanvillegas,

In order to achieve the top bar menu for mobile, you should use a bit of CSS code to do that. Try the code below and place it in Theme panel->Custom CSS area.

The code is ->

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

The result is here -> http://screencast.com/t/2zb92IQf4

Thanks.

Post count: 15

Hi there,

Hope it’s ok for me to reply on this thread, I was searching for how to get my top bar to show on mobile! I tried the code you posted on my site http://digitalaltitude.co but the top bar still doesn’t show 🙁

Screenshot here:

Screenshot

Post count: 23312

Hi,

Please try the following code.

The code is ->

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

Thanks.

Post count: 15

Thank you, that did the job, now how can I get the menu to be center aligned? This is how it looks now:

Screenshot

Post count: 23312

Hello digitalaltitude,

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

The code is ->

.top-bar-style-2 .td-header-sp-top-menu {
float: none!important;
text-align: center!important;
}

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

Thanks for your understanding!

Post count: 15

Hi, now it’s centered on mobile but it’s completely unaligned on desktop view lol!

Post count: 23312

Hello digitalaltitude,

Sorry, I forgot to put the media queries. Try the code below.

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

Thanks.

Post count: 15

Fantastic! That did the job, looks great now, thanks 🙂

Post count: 13

Hi, I tried all the CSS mentioned above but the top header menu I see on my desktop site still doesn’t appear on mobile. The URL is http://a-sk.com/en. What am I missing?

Post count: 23312

Hello sushilk,

Please notice that your code is a bit of different because you are using another header style. Try the code below and place it in Theme panel->Custom CSS area.

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

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

Thanks for your understanding!

Post count: 13

Yes, that works. Thanks!

Post count: 23

Hi there,
I have a problem with mobile menu. Main menu show not on the very top of the page. If i login, admin menu will be on the top of main menu. I also cannot shot top page menu.
http://www.screencast.com/t/NVtWPslu

  • This reply was modified 9 years by Hamzah.
Post count: 23312

Hello Hamzah,

I have inspected your website and I did not saw the top bar menu active on the desktop so I can make it displaying in mobile view and I cannot provide you a code in this regard, sorry!

Thanks for the message!

Post count: 23

Hi Catalin, my site is https://telset.id . And i already activate the top bar menu. Position is below the main menu.

Please check directly to my site.

thanks
hamzah

Post count: 23312

Hello

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

The code is ->

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

The result -> http://screencast.com/t/FRiYjz6GJ

Thanks for the message!

Post count: 23

Hello Catalin,
I use tagdiv mobile theme, and top bar menu still not show. Other question is, why admin menu cover header menu.

thanks
hamzah

Post count: 23312

Hello Hamzah,

Try the code below ->

@media (max-width: 767px){
.td-header-top-menu-full {
display:block!important;
}
}
@media screen and (max-width: 600px){
#wpadminbar {
position: relative;
}
}
@media screen and (max-width: 782px){
html {
margin-top:0!important;
}
}
@media screen and (max-width: 767px){
#wpadminbar{
display:none;
}
}

The result -> http://screencast.com/t/t0KOhsclDz

Thanks.

Post count: 21

None of these seem to be working, I’ve tried a few different ones now .. any ideas
?

Post count: 23312

Hello cloin1,

Please try to make your own topic with your problem and there you should provide your website URL so I can inspect it closer. Until this, you should try to create your own custom CSS code using the Inspector browser, according to our documentation here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Viewing 22 posts - 1 through 22 (of 22 total)
You must be logged in to reply to this topic.