Home page menu cuts off the top row of gallery

Site URL: https://www.richnosworthy.tv/

Hey guys,

wondering if anyone can help me figure out why this might be happening?  

On loading my website the first time, the main page shows the top row of gallery images cut off underneath the heading.  Should i reload the page it corrects itself but if i close the tab and reopen the website its back again.

I assume its something to do with the size of the top menu?  But is there anything i can do to force it to load in the correct way?

The same thing also happens if i click on one of the pages, the title bar now cuts off the top bit of the page.  Again reloading fixes it but only temporarily.

Any ideas i'd be very grateful

https://www.richnosworthy.tv/

Thanks

41 minutes ago, Richn said:

Site URL: https://www.richnosworthy.tv/

Hey guys,

wondering if anyone can help me figure out why this might be happening?  

On loading my website the first time, the main page shows the top row of gallery images cut off underneath the heading.  Should i reload the page it corrects itself but if i close the tab and reopen the website its back again.

I assume its something to do with the size of the top menu?  But is there anything i can do to force it to load in the correct way?

 

The same thing also happens if i click on one of the pages, the title bar now cuts off the top bit of the page.  Again reloading fixes it but only temporarily.

Any ideas i'd be very grateful

https://www.richnosworthy.tv/

Thanks

Did you apply some custom code on the image logo?

Anyway, this snippet may help to get rid the issue, it make the header position static to it not float over the container anymore

.header-position-normal #navigator header#topBar {
    position: static;
}
#container {
  margin-top: 0 !important;
}

Hey thankyou, 

yes I have added a bit of custom code over the years.  I'm not much of a CSS coder though so most of it has been found via forum posts.  I've added in your code underneath what i had before and seems to have fixed it.  Thankyou so much for your help!

/* center logo */
#nav {text-align:center;} #navigator .siteTitle {padding: 20px 0 20px 0;text-align:center;max-width:100%!important;} #navigator header#topBar ul#nav {padding: 0px 0 20px 40px;float: none !important;margin: 0 auto !important;}.siteTitle {text-align:center!important;float:none !important;}#navigator header#topBar ul#nav li a{border:0px;} #navigator header#topBar ul#nav li a::after {font-size: 19px;content: ''; position: absolute;top: 13px;left: 50%; text-indent: -2px;} #navigator header#topBar ul#nav li:hover a::after, #navigator header#topBar ul#nav li.active-link a::after {content: '\00B7';}#grid-heading {text-transform: uppercase;}

/* fix overlap titlebar overlap issue */
.header-position-normal #navigator header#topBar {
    position: static;
}
#container {
  margin-top: 0 !important;
}

/* remove footer */
#navigator footer#bottomBar { position: relative; }

/* remove sidebar */
div#project .meta {
  display: none;
}
/* fill project page to 85% width */
#project .gallery {
  max-width: 85%;
  margin: 50px auto;
}

/* remove share button */
#project .share-like {
   display: none !important;
}

/* remove next/prev arrows */
#navigator #project .switcher {
    display: none;
}

I'm having this same issue. This code seems to fix it on the desktop version but then I realized the mobile version gets all wonky so I removed it again. It's such a frustrating issue!