[Resolved] How can I move my shortcode countdown clock to the center of the Top Nav Menu?

[bluebit]

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?

View post on imgur.com

[Tom]

You 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.

[bluebit]

Just 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.

https://bundao.co

[David]

Hi 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;
    }
}

[bluebit]

Just did it, but the “Regras/Premios” menu item didn’t float to the left, it went to the right. How to fix?

https://bundao.co

[David]

I just edited the code above. 🙂

[bluebit]

It 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.

https://bundao.co

[David]

My bad, forgot to remove pointer events, code above has been edited.

[bluebit]

that 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>

[David]

That 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 selector

Might work 🙂

[bluebit]

where 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?

[bluebit]

this 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>

[David]

OK, 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.

[bluebit]

dude 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.

[David]

Cool, 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.

[Author]

Posts