How do I add a date and time in the upper right corner to a menu?

Question

I'm working on a responsive web design project. I have a problem, namely that I want to add a time and date to the written menu, which is to be in the upper right corner. In part I managed to achieve this effect, but unfortunately when the page changes size to the smallest possible, date and time overshadow list elements. For a few days I am trying to fix this, but I have no idea how to do it. Can you help me?

P.S. At the bottom of the page I also have a collapse navbar that works well. The best option would be to modify the code below

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Niedziela,', 'Poniedziałek,', 'Wtorek,', 'Środa,', 'Czwartek,', 'Piątek,', 'Sobota');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
  result = ''+days[day]+' '+d+' '+months[month]+' '+'  |  '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

  
  ul.topnav 
  {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif
   font-size: 12px !important;
   letter-spacing: 4px;
  }

   ul.topnav li 
   {
      float: left;
   }

   ul.topnav li a 
   {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   ul.topnav li a:hover:not(.active) 
   {
      background-color: #9ECB16;
   }

   @media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}
   }
   
   
   
   
   .clock
   {
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif;
   font-size: 12px !important;
   letter-spacing: 4px;
   }
   
   .clock p
   {
      display: block; 
      color: #FFFFFF;
      text-align: center;
      padding: 0 0 0 0;
      text-decoration: none;
   }
   

   
   .topcorner
   {
   position: absolute;
      top: 14px;
      right: 16px;
   }

<!-- CLOCK -->
<div class="clock topcorner">
 <p id="date_time"></p>
 <script type="text/javascript">window.onload = date_time('date_time');</script>
</div>

<!-- MENU -->
<ul class="topnav">
    <li><a href="#">SALON</a></li>
 <li><a href="#">SYPIALNIA</a></li>
    <li><a href="#">KUCHNIA</a></li>
 <li><a href="#">ŁAZIENKA</a></li>
 <li><a href="#">PRZEDPOKÓJ</a></li>
</ul>

There's some useful tips already here that might help you. http://stackoverflow.com/questions/40959133/diaply-clock-inside-the-html-page-or-div — Aaron Belchamber, May 16 '17 at 15:37
I would strongly recommend using [MomentJS](https://momentjs.com/) for the javascript side of this, they implement some cross-browser solutions, plus it offers some very nice, simple formatting options. — Toby, May 16 '17 at 16:34
@MichaelCoker Normally, this is a responsive site, so after resizing the window, the rest will also change? — Software Developer, May 17 '17 at 16:31
@Toby This is not the answer to my question, I do not need MomentJS (although I admit that it looks interesting), because the code works well. — Software Developer, May 17 '17 at 16:31
@SoftwareDeveloper yeah, that's generally how responsive works :) but change *how*? — Michael Coker, May 17 '17 at 16:46
where do you want the date/time to be relative to the menu on a small screen? can you draw a picture of what you'd like to happen? — Michael Coker, May 17 '17 at 16:47
@SoftwareDeveloper If it was an answer, I would have posted as an answer. :) — Toby, May 17 '17 at 17:01

score 0 · Answer 1 · answered May 16 '17 at 17:47

0

First of all: p is already a block. You don't need to apply that in your css. Second: .clock and .topcorner is the same for you. delete one class from html and put styles together in your css, as you making mess for yourself. Next: you already use

@media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}

   }

just add to this your p with the clock and decrease in this place the size of the font. Also turn off the absolute position, so it will not go out of the flow of the document when you collapse the page.

answered May 16 '17 at 17:47

A. Piks

1
3

Thanks for the answer, but it still does not solve the problem. I did as you suggested. However, the clock still veils the first link in the menu while reducing the screen resolution. The changed code is below your comment. – Software Developer May 17 '17 at 16:33
Read about the absolute position. @media screen and (max-width: 600px) { .clock{ position:static; } } Try to put it into static as I did above. In this case it will be in a normal flow of the document. Also, if you want, you can copy your example to https://jsfiddle.net so I can show you there – A. Piks May 22 '17 at 22:48

score 0 · Answer 2 · answered May 17 '17 at 16:25

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Niedziela,', 'Poniedziałek,', 'Wtorek,', 'Środa,', 'Czwartek,', 'Piątek,', 'Sobota');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
  result = ''+days[day]+' '+d+' '+months[month]+' '+'  |  '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

  ul.topnav 
  {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif
   font-size: 12px !important;
   letter-spacing: 4px;
  }

   ul.topnav li 
   {
      float: left;
   }

   ul.topnav li a 
   {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   ul.topnav li a:hover:not(.active) 
   {
      background-color: #9ECB16;
   }

   @media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}
   
   .clock
   {
    overflow: hidden;
    background-color: #000000;
    font-family: Coda, sans-serif;
    font-size: 6px !important;
    letter-spacing: 4px;
    top: 14px;
    right: 16px;
   }
   
      .clock p
   {
    color: #FFFFFF;
    text-align: center;
    padding: 0 0 0 0;
    text-decoration: none;
   }
   }
   
   
   
   
   .clock
   {
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif;
   font-size: 12px !important;
   letter-spacing: 4px;
   position: absolute;
      top: 14px;
      right: 16px;
   }
   
   .clock p
   {
      color: #FFFFFF;
      text-align: center;
      padding: 0 0 0 0;
      text-decoration: none;
   }

<!-- CLOCK -->
<div class="clock">
 <p id="date_time"></p>
 <script type="text/javascript">window.onload = date_time('date_time');</script>
</div>

<!-- MENU -->
<ul class="topnav">
    <li><a href="#">SALON</a></li>
 <li><a href="#">SYPIALNIA</a></li>
    <li><a href="#">KUCHNIA</a></li>
 <li><a href="#">ŁAZIENKA</a></li>
 <li><a href="#">PRZEDPOKÓJ</a></li>
</ul>

How do I add a date and time in the upper right corner to a menu?

2 Answers2