Jump to content

Home page menu cuts off the top row of gallery

Recommended Posts

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

Link to comment
  • Replies 3
  • Views 540
  • Created
  • Last Reply
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;
}

image.thumb.png.6eafaad5bc0aa8274e9e12f7e64ed6df.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

 

Link to comment
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.