spotonlynne

@tuanphan thank you so very much for all your help. It is much appreciated. I need to learn to code!

@tuanphan just realised the yellow link line does appear on the folder if viewing one of the pages within it, but not on the other menu items that are not in folders.

@tuanphan I forgot to attach the image! Here you go.

@tuanphan you are brilliant, thank you! It is not quite there though. The yellow line that is supposed to display in the menu on the active page has disappeared and there is now a small yellow block in the middle of the menu bar. See attached. Would you have another look please. So sorry to take up so much of your time.

Lynne

The code I have in total is:

/* header layout */

@media screen and (min-width:768px) {

.header-announcement-bar-wrapper {

    padding: 0px !important;

}

.header-nav {

    height: 97px !important;

    flex: 60% !important;

    width: 60% !important;

    background-color: #EDEAE2;

    padding-right: 5vw;

}

.header-title {

    width: 40% !important;

    flex: 40% !important;

}

.header-nav-item {

    height: auto !important;

}

.header-nav-wrapper {

    height: 100% !important;

}

nav.header-nav-list {

    height: 100% !important;

    display: flex;

    justify-content: center;

    align-items: center;

}

.header-title-logo a {

    padding-top: 20px;

    padding-bottom: 20px;

    padding-left: 5vw;

}

.header-nav-item--active a {

    background-image: none !important;

}

.header-nav-item {

    height: 100% !important;

    vertical-align: middle;

    display: flex;

    align-items: center;

}

.header-nav-item--active:after {

    content: "";

    background-color: #F6FF00;

    display: block;

    width: 10px;

    height: 5px;

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

}

}

/* nav color */

.header-nav-item a {

    color: #1e2a52 !important;

}

.header-nav-item a:hover {

    color: #fff !important;

}

.header-nav-folder-item a {

    color: #fff !important;

}

.header-nav-folder-content {

    top: 70px !Important;

}

@tuanphan I have just noticed that the dropdown menus on Services and Our Company are now sitting over the top of this menu bar and now below the folder name. Not sure how to fix this.

L

Gosh that is brilliant @tuanphan thank you. I just need to make the text in that grey section blue (#1E2A52). Would you be able to help me with that too please?

Lynne

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

Hello,

Me again! On the same site I just posted about I have also been asked to create a section with links to various pages, using an arrow with a coloured background. This needs to display differently on a mobile - see attached. Can anyone help me please, as I have tried various ways and failed.

https://weedwise.squarespace.com

Pw: W33dw1s3

Thank you!
Lynne

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

Hi. I have been asked by a designer to create a site where the menu at the top has two different background colours. One for the logo and a second for the navigation. The active page would have a yellow line underneath. I have attached a screenshot. Does anyone know how I can achieve this please? I am not a coder.

Thank you!

Lynne

Pw: W33dw1s3

Hi. I am trying to do exactly the same thing with a site I am creating. Where do I find the collection id class for my blog. The site is https://heseltinegallery.squarespace.com (pw: michael) and the blog page I want the dates not to show on is Meet the Committee. Any help would be greatly appreciated. Thank you. Lynne

On 6/17/2013 at 9:05 PM, eanderson said:

Always be sure to remove any code you add that does not work.

To add this snippet of custom CSS to your site, just click the CSS button inside the Style Editor and paste the code below:

.display-icons-in-post-footer .entry-date {
 display: none;
}

 

 

That should do the trick.

To hide the date only in one specific blog, preface this code with the unique collection id class found on the BODY tag. In your case, this class is collection-51bbee6be4b0405092e5f752 – so the snippet would look like this:

 

[code].collection-51bbee6be4b0405092e5f752.display-icons-in-post-footer .entry-date {  display: none;}

Hi. I am trying to do exactly the same thing with a site I am creating. Where do I find the collection id class for my blog. The site is https://heseltinegallery.squarespace.com (pw: michael) and the blog page I want the dates not to show on is Meet the Committee. Any help would be greatly appreciated. Thank you. Lynne

Hi,

I have been approached about building a subscription site for a company selling boxes of wine. I would like to use Squarespace, as it is my preferred choice, but am not sure I can achieve what I want to with it. I know people can purchase products, such as bottle or case of wine using the subscription method, but has anyone used it where you offer people the choice to build their own box, ie, select from a number of different varieties. If so, how did you achieve this? They are looking for something like: https://www.plenishdrinks.com/shop/custom-box

Any suggestions gratefully received. I am not a coder, but am used to using other plug-ins.

Thank you.

Lynne