- NewspaperThe Newspaper Mobile Theme: Introduction
- NewspaperThe Mobile Theme
- NewspaperMain Menu
- NewspaperHow to Add a Logo in Newspaper
- NewspaperBig Grid Flex Settings
- NewspaperHeader Builder
- NewspaperFont Customization
- NewspaperTheme Colors Introduction
- NewspaperBackground Introduction
- NewspaperHow to Install Newspaper via FTP
- NewspaperHow to Install Newspaper via WordPress
Hi, hope you are doing fine.
I want to just underline my mobile menu with a line like this as shown in the pic.
The line only should be under mobile menu.
Please have a look at the pic for further clarification.
Thanks for your undertsanding
Have tested woocommerce products on separate mobiles.
Here is how it’s supposed to look like:
https://prnt.sc/we8m8z
https://prnt.sc/we8lp5
Here is how it looks like on some mobiles:
https://prnt.sc/we8mv2
https://prnt.sc/we8n49
There are no menus, headers, and design I set by hardcoding.
Here is a link to the page:
https://happybarefoot.com/product/hfs-lightweight-road-running-shoe-women/
Salve, qualcuno sa dirmi come posso eliminare la foto di sfondo del menù in versione mobile?
Hello!
This can be possible to change it like in this topic: https://forum.tagdiv.com/topic/mobile-menu-54/ ; where I was explaining to another user how to add the mobile menu on tablet viewport in a video at the bottom of the page.
Hope that helps you!
Thank you!
Seems that by default Newspaper will use the “Desktop” menu for tablet viewports.
Is there a way to change this in Composer/The Theme Panel? Or do I have to do it via CSS?
Hello,
I’m sorry for a miss the question, I thought you solved it => https://www.screencast.com/t/lwDdYD3Ziwf -> https://www.screencast.com/t/CK0GWyoS. To change the color, select the element, in CSS change the background color =>https://www.screencast.com/t/TfyN2jv7 and in General -> Icon color => https://www.screencast.com/t/bBkFXnScYs6.
For creating the menu from the side panel, you need to go in WordPress -> Appearance -> Menus => https://www.screencast.com/t/jGUIBezaz, where you can create a new menu and add the menu items for mobile menu, after you can select the location for the new menu with tagDiv Composer => https://www.screencast.com/t/qVeJsidv.
For changing the image with color, you need the change the background-image with background-color =>https://www.screencast.com/t/5BdR2Auw, the new code is:
#td-mobile-nav{
width: 22%;
}
.td-menu-background, .td-search-background {
background-image: none;
}
#td-mobile-nav {
background: no-repeat;
background-size: cover;
background-color: #fff;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.1);
}
.td-menu-mob-open-menu #td-outer-wrap {
box-shadow: 0 0 46px #000000;
position: unset;
transform: unset;
}
Also, the fonts can be changed from tagDiv Composer on certain elements, for example, the title from Page Title => https://www.screencast.com/t/SJEj0mfVm.
Hope this helps you!
Thank you!
Hi how do i use a seperate mboile menu whenim not using Mobie theme or AMP ?
becosue when im not using the mobile theme, it loads the main menu on the mobile..
Thanks
Hi,
For the menu effect, please replace the code with this one
#td-mobile-nav{
width: 22%;
}
.td-menu-background, .td-search-background {
background-image: none;
}
#td-mobile-nav {
background: no-repeat;
background-size: cover;
background-image: url(http://localhost/testsite/wp-content/uploads/2020/12/mobile-bg.jpg);
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
.td-menu-mob-open-menu #td-outer-wrap {
box-shadow: 0 0 46px #000000;
position: unset;
transform: unset;
}
Replace the URL image with your image URL.
Also if you do not want to have this effect on mobile set the code only on those fields -> https://www.screencast.com/t/F3esk05dZat
Also, the theme has only a few settings for widgets, for example, you can change the fonts from here -> https://www.screencast.com/t/uEHpq6D6
Hope this will help you!
Hi @gmc!
Yes, that is possible for all viewports. Just add the mobile menu element above the header main menu, after that you need to hide the mobile menu element on all viewports except tablets and hide the header main menu on the tablet viewport.
Thank you!
Hi Bettina thank you for your patience
I don’t think we get along, unfortunately.
I want the same three horizontal lines at the top left as with the iPhone format, also for the iPad format. I want the normal text menu to be replaced by the mobile menu symbol.
I work with other topics and that is possible in the mobile format.
See this screenshot from another topic.https://www.screencast.com/t/E2UvxREkjQ1
Thank
OK font size done and understood.
My first question was how can I breakpoint the tablet so that the typical mobile menu appears above?
thanks
https://www.screencast.com/t/TnqUrfvYcMjx
https://www.screencast.com/t/bACVwnGRV8
Hello,
You can set the main menu to be a sticky menu from Theme Panel-> Header -> Main Menu => https://www.screencast.com/t/ShRFfKhm81,
or if you have a Pro Prebuilt Website you can set with tagDiv Composer in Manager, you can enable the sticky menu on desktop and mobile = > https://www.screencast.com/t/YTp5YZqel.
Hope this helps you!
Thank you!
Hello !
Please try this css code: .td-main-menu-logo img {
max-width: 200px;
width: 200px;
}
#td-top-mobile-toggle i {
font-size: 30px;
}
.header-search-wrap .td-icon-search {
font-size: 26px;
}
Let us know the results !
Thank you !
Hello! May I know how to keep head menu showing when I scroll screen on PC and mobile?
Thank you in advance!
Hello, everything goes well except this step “To edit the background image of sidebar menu:
> go to [theme panel] > background > mobile menu/search background > background image” not working, how to fix it?
Thank you in advance!
Hi,
I’ve noticed that this issue only impacts all pages EXCEPT the Home Page when I make the changes to Theme Colors for Mobile Menu and Search.
I’ve also noticed strange behavior on the Home Page vs. other pages. For example, the Header looks different on the Home Page (i.e. too much space between nav elements) vs. all the other pages.
I’ve tried clearing the cache and all other recommended methods, but the problem still persists.
You may activate the mobile at:
[theme panel] > [mobile theme] > [mobile settings]
> USE MOBILE THEME FOR > select “AMP” > save settings
(just to make sure you have activate toolbar at frontend)
then, go to [wordpress menu bar] > users > select and edit your user
at the “Toolbar” > make sure you select “Show Toolbar when viewing site”
at the “AMP Developer Tools” > make sure to enable “Enable AMP developer tools to surface validation errors when editing posts and viewing the site”
you may start editing the mobile page.
in this newspaper theme, editing the main page for desktop pc and mobile are 2 different designs
A quick review on creating the mobile. 2 ways to create mobile page:
==============
1st way:
==============
[wordpress admin menu bar] > [pages] > find your page (the home page) and select [edit with TD composer]
in short, edit the page with “TD composer”.
now you hav enter the TD composer editor, at the left panel where you can see “Welcome to tagDiv Composer”, at the top, you should be able to see either [create mobile page] or [edit mobile page].
there, you go, click on that button, you’ll start creating mobile version of the page.
==============
2nd way:
==============
while you have already log in, go to the page (in this case, the home page), at the top center toolbar, at the green button [edit with TagDiv composer], at right side, you will see the option to create or select the mobile page version.
for more information on this guide, you may refer to this tutorial guide:
https://tagdiv.com/newspaper-10-3-7-update-brings-customizable-and-fast-mobile-pages/
================================
Editing the header & footer
================================
You need to first import the template from the desktop page. Then only you can edit the header/footer (for mobile version).
The steps:
While you are editing the mobile page in tagDiv composer, click the [Manager] or [Website Manager]
then…
[header] > [convert template] > select the template header that is used by the normal page (desktop page)
then…
[footer] > [convert template] > select the template footer that is used by the normal page (footer page)
Then, the header, menu sidebar and footer are all unlocked for editing.
To edit the background image of sidebar menu:
> go to [theme panel] > background > mobile menu/search background > background image
Hello,
You can add the mobile menu with drag and drop from tagDiv Composer add element-> mobile menu, like this => https://www.screencast.com/t/AmHKBnoaMW. To edit to display the menu like this => https://www.screencast.com/t/1gCCJi3cO, you need to add customer code in Theme Panel -> Custom Code -> Advanced CSS => https://www.screencast.com/t/fXjJOafru.
The code is:
#td-mobile-nav, .td-menu-background{
width: 22%;
}
.td-menu-mob-open-menu #td-outer-wrap {
box-shadow: 0 0 46px #000000;
position: unset;
transform: unset;
}
To do the menu you need to go in Appearance -> Menus => https://www.screencast.com/t/4caWPksk4 . To set the new menu edit with tagDiv Composer and select the menu to create => https://www.screencast.com/t/E2sZWGbFCJA.
Hope this helps you!
Thank you!
Hello, after I create Mobile Home Page, I find can not edit foot ABOUT US and FOLLOW US, how to do that?
Also how to settle mobile head menu same like website?
Thank you in advance!
Hello friend, please open my website on mobile, then click top menu you will find social sharing logo (Twtter, Vimo, Youtube), how to disable it? Thank you in advance!
Assuming that you are using the latest version of “Newspaper”.
You can first verify that if the mobile plugin is installed or not (which I think you have already activated it), but in case not (just to verify)….
at the [newspaper] > welcome
click, install and activate the recommended plugins
1. tagDiv Mobile Theme
2. Official AMP for WP
then go to [theme panel] > [mobile theme] > [mobile settings] > USE MOBILE THEME FOR
> select “AMP” > save settings
then go to [wordpress menu bar] > users > select and edit your user
at the “Toolbar” > make sure you select “Show Toolbar when viewing site”
at the “AMP Developer Tools” > make sure to enable “Enable AMP developer tools to surface validation errors when editing posts and viewing the site”
then you can start editing the mobile page.
in this newspaper theme, editing the main page for desktop pc and mobile are 2 different design
the mobile page requires another separate creation and editing.
therefore the “mobile” edition of the “page” is needed to be created.
there are 2 ways (which I know so far) to create and edit the “mobile” version of page.
==============
1st way:
==============
[wordpress admin menu bar] > [pages] > find your page (the home page) and select [edit with TD composer]
in short, edit the page with “TD composer”.
now you hav enter the TD composer editor, at the left panel where you can see “Welcome to tagDiv Composer”, at the top, you should be able to see either [create mobile page] or [edit mobile page].
there, you go, click on that button, you’ll start creating mobile version of the page.
==============
2nd way:
==============
while you have already log in, go to the page (in this case, the home page), at the top center toolbar, at the green button [edit with TagDiv composer], at right side, you will see the option to create or select the mobile page version.
for more information on this guide, you may refer to this tutorial guide:
https://tagdiv.com/newspaper-10-3-7-update-brings-customizable-and-fast-mobile-pages/
By default, right after you created the mobile page (fresh new creation), the header/footer is not editable in tagDiv composer. You need to first import the template from the desktop page. Then only you can edit the header/footer (for mobile version).
The steps:
While you are editing the mobile page in tagDiv composer, click the [Manager] or [Website Manager]
then…
[header] > [convert template] > select the template header that is used by the normal page (desktop page)
then…
[footer] > [convert template] > select the template footer that is used by the normal page (footer page)
Then, the header, menu sidebar and footer are all unlocked for editing.
To edit the background image of sidebar menu:
> go to [theme panel] > background > mobile menu/search background > background image
Here is the workaround:
By default, right after you created the mobile page (fresh new creation), the header and sidebar menu is not editable in tagDiv composer. You need to first import the template from the desktop page. Then only you can edit the footer (for mobile version).
The steps:
While you are editing the mobile page in tagDiv composer, click the [Manager] or [Website Manager]
then…
[header] > [convert template] > select the template header that is used by the normal page (desktop page)
Then, the header and menu sidebar will be unlocked for editing.
Hope this helps.
I have found the solution, the workaround:
By default, right after you created the mobile page (fresh new creation), the footer is not editable in tagDiv composer. You need to first import the template from the desktop page. Then only you can edit the footer (for mobile version).
The steps:
While you are editing the mobile page in tagDiv composer, click the [Manager] or [Website Manager]
then…
[header] > [convert template] > select the template header that is used by the normal page (desktop page)
then…
[footer] > [convert template] > select the template footer that is used by the normal page (footer page)
Then, the header, menu sidebar and footer are all unlocked for editing.
Hope this helps someone who is needed.
Here is the add-on info about editing the mobile page footer.
I have found the solution, the workaround:
By default, right after you created the mobile page (fresh new creation), the footer is not editable in tagDiv composer. You need to first import the template from the desktop page. Then only you can edit the footer (for mobile version).
The steps:
While you are editing the mobile page in tagDiv composer, click the [Manager] or [Website Manager]
then…
[header] > [convert template] > select the template header that is used by the normal page (desktop page)
then…
[footer] > [convert template] > select the template footer that is used by the normal page (footer page)
This will unlock all 3 areas (the header, menu sidebar and footer) for editing.
Hope this helps.
