I have been trying to figure out how to make a drop down menu for my portfolio page for awhile now. When the cursor hovers over the "projects" on the navigation bar, I want a drop down menu to come down listing all the things I've worked on.
You can see an example of what I want to do on "Projects Menu" in the nav bar. Basically, I want the Projects Menu drop down to go with the "projects" page.
Assuming you are using one of the Grid (Overlay or Simple) Layouts for your Others Page, put the following in Design > Custom CSS. If you use a Layout other than one of the grids then this code won't work.
/* 100% (auto) */
/*insert Page collection id here]*/ [class^="portfolio-grid-"] {
grid-template-columns: auto;
}
Replace /*insert Page collection id here*/ with the collection id for your Others Page.
Do you know how to find the collection id for a Page? If not, let us know and we can help you.
If you don't want the column to take up the whole page following are some variations.
/* 75% */
/*insert Page collection id here]*/ [class^="portfolio-grid-"] {
grid-template-columns: repeat(8,auto);
}
/*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {
grid-column: 2 / 8;
}
/* 50% */
/*insert Page collection id here]*/ [class^="portfolio-grid-"] {
grid-template-columns: repeat(4, auto);
}
/*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {
grid-column: 2 / 4;
}
If you have the business plan then you can put the CSS in Page Settings > Advanced > PAGE HEADER CODE INJECTION.
<style>
/* 100% (auto) */
[class^="portfolio-grid-"] {
grid-template-columns: auto;
}
</style>
It is basically the same as above just wrapped in a style tag and minus the collection id.
The CSS uses CSS3 substring matching attribute selectors.
Let us know how it goes.
Maddog got a reaction from ron1cne in Drop Down Menu for Index/Portfolio Page 7.1
