Jump to content

Customize Hidano menu to be bottom-left justification

Go to solution Solved by tarun,

Recommended Posts

Hi - I have a client who chose the Hidano theme. I wasn't a huge fan of the design but the client wanted to choose it so I started work. When reached a midpoint, I shared what I had and, of course, she wasn't a fan of the menu navigation on the front of the page. Her existing site has a menu that is bottom-left justified. I took a look at the CSS and there are hundreds of styles governing this portfolio-menu, which appears to be the class that controls this. I tried to use the flex that I knew to adjust, but I'm hitting the limits of my knowledge. 

Can someone help unblock me with some CSS injection that would achieve moving the main "navigation" to the bottom left? 

https://tarantula-gerbil-46xy.squarespace.com
pw: cwdesign

Edited by tarun
added link and pw
Link to comment
  • Replies 5
  • Views 979
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Password of the site?

Link to comment

Playing around with the CSS, I do see I can set a property to `flex-end` which helps, but I can't get the text to left justify and also I'd prefer the size to be fixed (doesn't grow with the page, but does flow when resized.

Link to comment
  • Solution

Figured it out; Hidano does have a few built in options to set the size (they are referred to as portfolio settings); then it was a matter of filling out the following CSS. The last bit is a bit of a bad hack to get things to align to the site title, but it flows fine so going to leave it...
 

.portfolio-hover[data-vertical-align="middle"][data-mode="hover-cover"] .portfolio-hover-items {
    justify-content: flex-end;
}

.portfolio-hover[data-layout="inline"][data-delimiter="forward-slash"] .portfolio-hover-item:not(:last-child) .portfolio-hover-item-title::after, .portfolio-hover[data-layout="inline"][data-delimiter="forward-slash"][data-mode="hover-cover"] li:not(:last-child) .portfolio-hover-item .portfolio-hover-item-title::after {
    content: "|";
}

@media screen and (max-width: 575px) { 
  
  .portfolio-hover[data-layout="inline"][data-delimiter="forward-slash"] .portfolio-hover-item:not(:last-child) .portfolio-hover-item-title::after, .portfolio-hover[data-layout="inline"][data-delimiter="forward-slash"][data-mode="hover-cover"] li:not(:last-child) .portfolio-hover-item .portfolio-hover-item-title::after 
  	{
    content: none;
	}
}

.portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-items {
    align-items: flex-start;
}

.portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-items-list {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.portfolio-hover[data-mode="hover-cover"] .portfolio-hover-items-list {
    padding: 1.5vw;
}

.portfolio-hover-items-list {
    margin-left: -30px;
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.