- NewsmagMain menu
- NewsmagIntroduction
- NewsmagLogo & Favicon
- NewsmagBackground introduction
- NewsmagTheme colors introduction
Hi,
You could try a code like this, to modify how the mobile menu displays
– https://www.screencast.com/t/W5biIPBy5C
There might be more modifications needed, but this will give you a starting point if you want to make further customization. You can test the code and see if it is working properly.
Enter it in Theme panel->Mobile theme->Custom CSS section (you can test with other values by modifying the code)
.td-menu-background,
.td-mobile-container {
width:50%;
height: 50%;
}
.td-mobile-container .td-menu-socials {
height: 120px;
}
.td-mobile-main-menu li a {
border-bottom: 1px solid black;
padding: 15px 45px 15px 15px;
}
Here is a link to a tutorial about using the browser inspector to identify the elements on the page and their classes, in order to create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
The code can then be used in the theme panel custom code sections.
Thanks
Hi,
You can try a code like the one provided below. It will make the top menu display on mobile, and be sticky as well
– https://www.screencast.com/t/imk5KSLM
The code must be entered in Theme panel->Advanced CSS in then phones section
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: block!important;
}
.body-td-affix .td-header-top-menu-full {
position:fixed;
top:54px;
}
Thanks
Heyy guys. 🙂
I was wondering about the same thing. The menu displayed on mobile covers the whole screen. https://www.screencast.com/t/nt8fYvuvfuSI
It would great if it was possible to customize it so it doesnt cover everything.
as enrique00 said around 45-50% wide would be preferred, which is what i also want if possible 🙂
And adding an horizontal line to separate the categories and some spacing
Something like this would awesome. Its the look im kinda going for, but it shouldnt be like 100% accurate. some changes would be cool. just for inspiration purpose.
https://www.screencast.com/t/2xeIUjHhDAHJ
ps my site is called: https://www.ciaao.dk
Hi,
This is how the website displays without the “#” you mention
– https://www.screencast.com/t/gP0z5pgr1a
And this is with the symbol added
– https://www.screencast.com/t/61I9pmru
They are the same regardless of the symbol in the URL.
This is the website on mobile
– https://www.screencast.com/t/3N2HXA0LOtXq
The mobile theme does not have any effect on the URL of the website. I believe that symbol is simply added when you use the mobile menu
– https://www.screencast.com/t/s6zfHIsSJf
I don’t see the mobile theme displaying in this case, even if you enter the symbol by mistake. Please correct me if I misunderstand something.
THanks
Hi,
The mobile background color can be changed in the theme panel like this if you are not using the mobile plugin
– https://www.screencast.com/t/oG3loRRD
When the mobile theme plugin is active, the changes need to be made in the mobile section
– https://www.screencast.com/t/vunWfamxI91m
There is no option to modify the width of the mobile menu. It could only be done with custom code. That is the case for the horizontal line that you mention, between the menu items.
If you could provide a link to your website and more details about what exactly you are t trying to do, I will try to give you a solution.
Thanks
Hi,
I am using responsive site. I have implemented this code in theme panel-> custom code but still unable to get top menu bar on mobile.
.td-header-style-12 .top-header-menu > li, .td-header-style-12 .td-header-sp-top-menu, .td-header-style-12 .td-header-sp-top-widget {
line-height: 37px; !important;
}
@media (max-width: 767px) {
.td-header-style-6 .td-top-menu-full {
display: block;
height: auto;
padding: 0 16px;
}
.td-header-style-6 .td-top-menu-full .td-header-sp-top-menu {
height: auto;
}
.td-header-sp-top-menu .top-header-menu {
text-align: center;
}
.single_template_6 .td-header-wrap {
height: 450px;
}
.td-post-template-6 .td-post-header {
bottom: -50px;
}
.td-full-screen-header-image-wrap {
top: 50px !important;
}
}
@media (max-width: 497px) {
.td-post-template-6 .td-post-header {
bottom: -100px !important;
}
.td-full-screen-header-image-wrap {
top: 100px !important;
}
}
Hi,
You could try a code like this one, and it will make the top menu visible on mobile as well
– https://www.screencast.com/t/vLxErQSO6d
.td-header-top-menu-full,
.top-bar-style-2 .td-header-sp-top-menu {
display: block!important;
float:none;
text-align:center;
}
The code must be entered in Theme panel->Custom Css, if you decide to use it.
Unfortunately I cannot test this on your website at the moment, it seems to require login information
– https://www.screencast.com/t/jIKHfwgl5lf9
The top menu will be displayed at the top, it is not part of the main menu container and it cannot be displayed along inside it. Normally the top menu is not displayed on mobile, there is a possibility that this solution may not work properly.
Thanks
Hi,
I would like to make three changes to the mobile menu, once displayed.
First, the background, by default is a gradient from black to blue, I will need to be from white to green. Second, how can I specify that the displayed mobile menu would be about 50% of the screen (wide), not 100%.
And last, is it possible to add an horizontal line to separate the categories?
Thanks
Hi,
When I press the toggle menu it does nothing, just adds a # at the end of the url.
I installed the Mobile Theme plugin to test it, and the toggle menu works well with it, but since I don’t like the mobile layout, I had to uninstall it, and I can’t figure it out where is the problem.
Is it possible to have the Mobile Theme plugin installed while keeping the desktop layout for the mobiles?
Can you take a look to my site: http://meganotas.com
Thanks
Having the top menu display on mobile when tapping the 3 horizontal lines in the upper left corner on mobile to show the main menu on mobile would totally work.
How can i do that? It’s viteea.com
I want the top bar from the desktop version top be displayed where i just mentioned above.
Hi,
On mobile the same menu from desktop will display, unless the mobile theme is active. The top menu could be made to display on mobile. If you could provide a link to your website, I will try to give you a solution.
Thanks
Is there a way to show a different main menu when it’s viewed on a mobile phone without using the mobile theme plugin?
I need to be either able to show the top bar on mobile without the mobile theme plugin, or show a different main menu on the mobile version.
I had to disable the mobile theme plugin since you said it doesn’t work with shortcodes. I’m using a membership plugin that uses shortcodes which won’t show using the mobile theme plugin.
-
This reply was modified 9 years by
mkastrupsen.
What is the best and easiest way to do this?
Right now, in the demo below:
https://demo.tagdiv.com/newspaper_recipes/
The mobile menu has the social icons displayed up top (evernote, facebook, google+, etc)
We would like to instead replace all those social icons with 2 or 3 plain text links (about/help/subscribe)
Thanks in advance!
Hi Bogdan,
I disabled all the plugins and cleared cache (unfortunately I didn’t install a child theme) but it is still the same.
When I look into console when the pages loaded it shows this:
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT 1.jpg
This line appears about 2 minutes after page loaded, and it is only when this line appears that the mobile menu is working. Which means the menu is waiting for the two lines mentioned in my first post to be loaded.
Any suggestions?
Thanks!
Tina
Hi,
I am assuming you are mentioning the mobile menu background. If you are not using the mobile theme plugin, this background has to be set here
– https://www.screencast.com/t/h1jIkCoq8Vi
If the mobile theme plugin is active, here
– https://www.screencast.com/t/x9M52kv7e
If you have set a background and it is not displayed, try clearing your cache, maybe this is the cause.
Thanks
Well I’ve pasted this code in the Mobile Theme / General Ads / Header Ad, to upload an ad to the top after menu and I have not got it.
<div class=”td-all-devices”>
</div>
<div class=”td-all-devices”>
Ads continue to appear in the default position that the Theme marks.
Can you explain in some detail how to do this?
Thank you
Hi,
My mobile menu is not working properly. It takes few minutes to actually have the mobile menu slide out. When first entered the page and click on the hamburger icon, it just zoomed out and does nothing.
I think the problem might be we have to remove these lines:
.td-menu-background,
.td-search-background {
background-image: url(‘http://192.168.0.208/wp_011_test_demos/wp-content/uploads/2017/05/1.jpg’);
}
.white-popup-block:before {
background-image: url(‘http://192.168.0.208/wp_011_test_demos/wp-content/uploads/2017/05/1.jpg’);
}
If not, can you provide me a solution?
Thanks,
Tina
Hello
http://www.thebackpackertravels.com
I’m not using the mobile theme for mobile and I am happy with the views etc but I can’t seem to find how I can add some pages to the menu?
For example, via a desktop, I have two menus, Header Menu (Main) and Top Header Menu.
The mobile version of the site just displays Head Menu (Main) but I want to include the pages contained in the Top Header Menu.
Is this possible?
https://dointerior.ru/
page you want to delete from the mobile menu https://dointerior.ru/planirovshhik
Hi,
I have inspected your website, and I have no problem using the mobile menu toggle
– https://www.screencast.com/t/8rUuKfeN89
– https://www.screencast.com/t/HlBhsUisW
The mobile menu toggle is working properly from what I can see. Please correct me if I misunderstand.
Thanks
Hello,
If you use the mobile theme then you will be able to simply create a separate menu for your mobile, version: https://forum.tagdiv.com/the-mobile-theme/
If you do not use the plugin, then please provide a link to your site and specify which menu items you want removed from mobile devices and I will provide the proper css code for it.
Thanks.
Hi,
My mobile menu is not working, when I inspect it shows href=”#”.
My website: http://www.realiseme.com
Thanks,
Tina
need to delete some pages from the mobile menu , please tell me how can I do that ?
Hello josflachs,
You should set up your main menu for Mobile Theme from Theme panel, like this -> https://www.screencast.com/t/P2Ukxk8E Clear all the caches and check the results.
Thanks.
I got a weird problem. The site runs fine, but on the mobile phone only (not on tablets or bigger) I get a login ‘Click here – to use the wp menu builder’ instead of the menu.
How do I solve that? site is: http://ollekebolleke.info