Floating site navigation splitting in to two lines on mobile.

Site URL: http://www.timjobling.co.uk

Hi, 

I'm having some issues with my custom floating navigation on my site. I'm using the following code to position a floating nav that disappears on scroll:

 @media only screen and (max-width: 800px){
  #header #topNav {
    display: block;
    position: absolute;
    top: 80%;
  left: 50%;
  transform:translate(-50%,-50%)

  
  }
}

It is woking fine until I add a third 'News' page to the navigation, it seems to split the nav in to two lines when viewing on a phone. I've currently removed the news page as I can't work out how to position it correctly.

I've tried changing the position from absolute which puts the pages on the same line, but then it is not centred.  If anyone knows a fix for this it would be very much appreciated. Thanks.

Can you remove the code & add item 3? We will try checking easier

Hi @tuanphan, I’ve added the third page back on, if you wouldn’t mind taking a look that would be amazing. Thanks. 

On 3/26/2022 at 2:56 PM, timjphoto said:

Hi @tuanphan, I’ve added the third page back on, if you wouldn’t mind taking a look that would be amazing. Thanks. 

Use this new code

@media only screen and (max-width: 800px){
  #header #topNav {
    display: block;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100% !important;
    right: unset !important;
    float: none !important;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}

@tuanphan that worked perfectly, thank you so much!