Home › Forums › Support › How can I move my shortcode countdown clock to the center of the Top Nav Menu?
- This topic has 18 replies, 3 voices, and was last updated 5 years, 8 months ago by David.
-
AuthorPosts
-
July 30, 2018 at 1:18 pm #636414bluebit
I’d like to move my shortcode countdown clock to the center of my Top Nav Menu and also add an menu item to the left side where i marked it in red in the picture attached below, how can I do this?
July 30, 2018 at 8:38 pm #636597TomLead DeveloperLead DeveloperYou can use a plugin like this to add the shortcode as a menu item: https://wordpress.org/plugins/shortcode-in-menus/
Then add the other menu item as well and let me know. We should be able to position them with some CSS.
July 30, 2018 at 8:58 pm #636614bluebitJust installed the plugin. Now how to move the left menu item to the left side and the countdown clock to the center? Also what’s the default font for generatepress since the countdown clock font seems to look different than the rest of the menu.
July 31, 2018 at 4:59 am #636849DavidStaffCustomer SupportHi there,
you can try this CSS:
@media (min-width: 768px) { .secondary-navigation ul { position: relative; } li#menu-item-334 { float: left; } .secondary-navigation li.menu-item-type-gs_sim { position: absolute; top: 12px; left: 0; right: 0; pointer-events: none; } }
July 31, 2018 at 8:42 am #637056bluebitJust did it, but the “Regras/Premios” menu item didn’t float to the left, it went to the right. How to fix?
July 31, 2018 at 8:58 am #637080DavidStaffCustomer SupportI just edited the code above. π
July 31, 2018 at 11:13 am #637172bluebitIt worked but I noticed something weird, for the left top nav menu item, when i try to hoover my mouse over the item, the underline doesnt appear sometimes, it only appears when i move the mouse up more near the top edge of the screen, try hoovering the mouse over the other menu items, you’ll see what I mean, the left top menu item has something wrong going on. Also i can’t click on the menu item unless i move my mouse cursor above the letters.
July 31, 2018 at 11:17 am #637177DavidStaffCustomer SupportMy bad, forgot to remove pointer events, code above has been edited.
July 31, 2018 at 11:39 am #637192bluebitthat worked nice π Hey do you know how to add test in front of the countdown timer shortcode? I want to add this text in front of the countdown timer: Contest Ends:
This is the countdown timer shortcode thats on the top middle of the nav:
<style>
p {
text-align: center;
font-size: 14px;
margin-top:0px;
}
</style><p id=”demo”></p>
<script>
// Set the date we’re counting down to
var countDownDate = new Date(“Sep 1, 2018 11:30:00″).getTime();// Update the count down every 1 second
var x = setInterval(function() {// Get todays date and time
var now = new Date().getTime();// Find the distance between now an the count down date
var distance = countDownDate – now;// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);// Output the result in an element with id=”demo”
document.getElementById(“demo”).innerHTML = days + ” Dias, ” + hours + ” Horas, ”
+ minutes + ” minutos y ” + seconds + ” segundos “;// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById(“demo”).innerHTML = “EXPIRED”;
}
}, 1000);
</script>July 31, 2018 at 11:56 am #637203DavidStaffCustomer SupportThat shortcode menu plugin accepts HTML, so you could just write it in there e.g:
<span class="my-label">Competition Ends:</span> ["my-shortcode"]
Then add a
float: left;
property to the.my-label
selectorMight work π
July 31, 2018 at 12:43 pm #637230bluebitwhere do i add the .my-label selector with the float? do I add it in the css code that you gave me earlier or do i place it in the menu?
July 31, 2018 at 12:44 pm #637231bluebitthis is what i did so far, just pasted the span class code on top of the shortcode like this:
<span class=”my-label”>Competition Ends:</span>
<style>
p {
text-align: center;
font-size: 14px;
margin-top:0px;
}
</style><p id=”demo”></p>
<script>
// Set the date we’re counting down to
var countDownDate = new Date(“Sep 1, 2018 11:30:00″).getTime();// Update the count down every 1 second
var x = setInterval(function() {// Get todays date and time
var now = new Date().getTime();// Find the distance between now an the count down date
var distance = countDownDate – now;// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);// Output the result in an element with id=”demo”
document.getElementById(“demo”).innerHTML = days + ” Dias, ” + hours + ” Horas, ”
+ minutes + ” minutos y ” + seconds + ” segundos “;// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById(“demo”).innerHTML = “EXPIRED”;
}
}, 1000);
</script>July 31, 2018 at 12:50 pm #637234DavidStaffCustomer SupportOK, lets scrap that idea, and lets use a pseudo element. So just put it back to the shortcode only and add this CSS:
p#demo:before { content: 'Competition Ends '; }
If needed you can add other font styles to this Rule.
July 31, 2018 at 3:00 pm #637294bluebitdude it works, haha, thats awesome, take a look: https://bundao.co
How can I change the text color for both the “Competition Ends” text and the countdown clock text/numbers? And change the font to the same font used in the other menu items, I believe im using the default GeneratePress font, but don’t know what its called.
July 31, 2018 at 3:04 pm #637299DavidStaffCustomer SupportCool, thats right on the money lol
So you can change the color of them both with:
p#demo { color: #F00; }
If you want to style the Competition ends separately then add a color property to the rule i provided before.
-
AuthorPosts
- You must be logged in to reply to this topic.