ed.design

ok, thank you for all your help!

Thank you creedon! your code worked perfectly! 

Now on mobile the links that were in a dropdown menu are visible as part of the main menu, the arrows are gone and you don't have to click thru to another menu page. Clean & simple.

Thank you for your help Tuan Phan!! 

This code block worked great, my buttons are now equally spaced in a row (see attached).

I got rid of the form button, replacing it with a regular button. I also edited the CSS to remove padding around the buttons so that the row of buttons line up with the text block on my page.

I am trying to add an alternate style for mobile, where the buttons are stacked and should be the same width as the text block. I made the button width 88% based on the view on my phone, but thinking this is probably not reliable ... do you have a better solution? (mobile view also attached)

<style>
  /* MOBILE */
@media screen and (max-width:767px) {

div.code-block .sqs-block.button-block.sqs-block-button {
  padding: 7px 0 !important;
}  
div.code-block .sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
  width: 88% !important;
} 
}
  /* DESKTOP */
@media screen and (min-width:768px) {
div.code-block>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.code-block .button-block {
    padding-top: 0 !important;
}
div.code-block .sqs-block.button-block.sqs-block-button {
  padding: 0 !important;}
}
</style>

Sure, I can add a code block! Yes, please share the code. 

I appreciate the creative idea, but I'd love to have all 4 buttons on one line. Would it be possible to have 4 buttons in one row if I made the 4th button smaller, with shorter text? Why is 3 buttons easier to do than 4?

Thank you for your help!

Hi, I'm having a similar problem on my 7.0 site. I have 4 buttons (the first is a form block button) that I would like to have spaced evenly under the text block. And also line up with the edges of the text block / the row of buttons would have the same width as the text block. Any ideas? here is the url: https://www.greendiebboll.com/about Much appreciated!

I am having the same issue. I have a gallery block that I would like to fill the entire section but there is extra padding above and below.

Yes, the site url is www.pollyking.com (business plan)

Thanks for you help!

Greetings,

Does anyone know of a way to style the 7.1 mobile menu so that any dropdown menus (links in folders) are displayed as part of the navigation list on the main mobile menu page? Right now clicking on the hamburger in the site header brings you to a page with a list of nav links and any folders have an arrow to the right requiring you to click onwards to another page in order to see the dropdown links. I'd like them to display as part of the main list, ideally as indented subcategories.

I've attached 2 screenshots of how it works now... the third image is the way I'd like it to look (photoshopped).

Seems like this would already be a Squarespace feature, maybe I'm missing something? Surely a more efficient way to navigate the mobile menu than clicking through to extra screens.

Thanks!

Thank you both. I combined your suggestions and my problem is solved!

Final code: 

.header-announcement-bar-wrapper {
   background-image: url("https://static1.squarespace.com/static/5e8f40af1b4e4b61d7da3560/t/5e98a44ff7394c3f871aec65/1587061839876/sunman_tiny.gif") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

(realized I had my url format wrong also)

Many thanks!

Site URL: https://mitzura.squarespace.com/

Hello,

Does anyone know of a way to add a background image to the header in 7.1? 

The workaround I've found is to make the header transparent, then add a section below the header which has the background image. But I don't want to have to go through every page of the website adding this extra section. 

I also tried adding background-image through custom CSS but it's not working:

#header {
background-image: url("sunman_tiny.gif") !important;
}

Any ideas much appreciated.

Thanks,
Erin 

Hi Brandon,

Thank you for this great solution to the lack of Lightbox captions in 7.1 - I have successfully added captions to my slideshow.

I was wondering if you know a way to have the caption break into 2 lines. My slideshow is an artist portfolio so the captions have the image title which I'd like to display on the first line and then size, year etc. which I'd like to display on a second line of text. Any thoughts?

Also, I am having the same caption overlap problem as some others in this forum: 

One problem, I can't correct is that when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image. The only way i have managed to fix is by making a black box around the caption as shown below.

Thanks so much for your help!

Erin