Jump to content

Customize Hidano menu to be bottom-left justification

By tarun, in Customize with code

Go to solution Solved by tarun,

Recommended Posts

tarun Level 2

tarun

Posted
Posted (edited)

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
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tarun Level 2

tarun

Posted
  • Author
Posted

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.

  • Solution
tarun Level 2

tarun

Posted
  • Author
  • Solution
Posted

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

 

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources