In my web I use the Newspaper 9 gaming theme.
I want to add a navigation button with a fixed position when the user accesses using mobile on each posting page and page.
Screenshot : https://pasteboard.co/HZJ2fIP.jpg
I want add this code :
<div class="navbar">
<a href="#"><i class="tds-icon td-icon-whatsapp"></i><br>WA</a>
<a href="#"><i class="tds-icon tdc-font-tdmp tdc-font-tdmp-old-phone"></i><br>TELP</a>
<a href="#"><i class="tds-icon td-icon-whatsapp"></i><br>WA</a>
</div>I have used these 3 ways:
1. Newspaper > Theme Panel > Custom Code > {add script html}
2. Add html scripts on wp-content/themes/newspaper/footer.php and wp-content/themes/newspaper/mobile/footer.php
3. Add html script with visual composer.
I used this method successfully, but only on the front page.
how can the script that I use be used on every page, post page ?
Hi,
You can set that code in header or footer, in this way it will be display on all post/pages…
In order to set the code in header you need to set the code in newspaper>Theme panel>ads >Header ad -> https://www.screencast.com/t/yF7YkSYbBXXX -> https://www.screencast.com/t/o0ZVJ9QCLsB
Set in footer, you can set as footer a page and set the code in that page in html element or chose a footer with columns and set the code in html widget -> https://www.screencast.com/t/QiP2urwcd5CV -> https://www.screencast.com/t/tj3WnHFag -> https://www.screencast.com/t/HT0puLLR
Or you can set it in sidebar and set the sidebar on each post / page -> https://forum.tagdiv.com/sidebars-tutorial/
Hope this will help you!
this method works, but when accessing a real mobile device html code only appears on the main page (example.com)
when I access using real device android or iphone on the article page it doesn’t appear. (example.com/article-hello-world)
so the code only works on the main page (example.com) does not work on the article page (example.com/article-hello-world)
Hi,
Are you using the mobile theme?
if yes then you’ll need to set in mobile them the code -> https://www.screencast.com/t/HU2qccUL7
Thank you!
still the same, only can work on the main page.
my code css
<style>
/* Place the navbar at the bottom of the page, and make it stick */
@media (max-width: 991px) {
.navbar {
display:none;
}
}
@media (max-width: 991px) {
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
z-index: 9999;
left: 0;
margin: 0;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
width: 33.33333%;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
}
</style>
my code html
<div class="navbar">
<i class="tds-icon td-icon-whatsapp"></i><br>WA
<i class="tds-icon tdc-font-tdmp tdc-font-tdmp-old-phone"></i><br>TELP
<i class="tds-icon td-icon-whatsapp"></i><br>WA
</div>
I dont use the-mobile-theme
Hi,
Is not work for you because of custom css, please remove the css, and check on your site.
Thank you!
there is a solution I want to add 3 floating buttons at the bottom?
thanks for the help, i found what plugin i needed
