Hi All,
Can anybody please help me in adding a dropdown menu in the newly launched theme “Solo”?
Have you seen the approach described here? https://forum.ghost.org/t/add-dropdowns-to-main-menu-through-the-site-admin-copy-paste-into-site-header-footer-injections . Odds are pretty good it’ll work ok on Solo as-is, but if you try it and it doesn’t, please post again describing the problem. (Ideally with your site’s URL included in the post.) You might also want to specify if you can use a solution that requires editing the theme, or whether you need a code-injection-only solution - see that link for more details.
1 Like
I entered the css code in the header and footer but its not working.
Do I need Github to follow the steps?
Would I need to upgrade my plan to $25 to use Github?
I don’t know why you’d need GitHub?
Can you show what happens on the page? And a screenshot showing your navigation page, with the special labels added?
1 Like
Good catch, @denvergeeks - betcha that’s the problem.
1 Like
This is what I have in the header and footer. Please check if I am making a mistake in this. I have never done this CSS stuff, so new for me. So please bear with me if I am not able to follow your instructions.
You need the rest of the footer code in addition to what you have there.
my website is abhineetarora.com
if you see the website, I need a dropdown in articles with the page’s name. This is how I have the Primary Navigation.
Where am I going wrong?
This is the footer now. Do I need to write anything in the place of the Target element and other stuff?
This is what I found in Xcode on my mac, I downloaded the solo theme and opened it in Xcode. opened screen.css and below is the code.
/* Article
/* ---------------------------------------------------------- */
.gh-article-meta {
top: 0;
bottom: 0;
z-index: 10;
grid-row-start: 1;
width: 100%;
margin : 0 !important ;
}
.gh-article-meta-inner {
position: sticky;
top: 48px;
display: flex;
flex-direction: column;
}
.gh-article-meta .gh-author-image {
width: 72px;
height : 72px ;
margin-bottom : 16px ;
}
.gh-article-meta .gh-author-name {
font-size: 1.9rem;
letter-spacing : -0.01em ;
}
.gh-article-meta .gh-author-name a {
color: var(–color-darker-gray);
text-decoration : none ;
}
.gh-article-date {
margin-top : 4px ;
font-size: 1.4rem;
font-weight : 480;
color: var(–color-secondary-text);
}
.gh-article-tag {
width: fit-content;
padding : 2px 12px ;
margin-top : 20px ;
font-size: 1.5rem;
font-weight : 700;
color: var(–tag-color, var(–color-darker-gray)) !important;
text-decoration : none !important ;
letter-spacing : -0.01em ;
border: 2px solid var(–color-border);
border-radius : 24px ;
}
.gh-content .gh-article-header {
grid-row-start: 1;
grid-column: 4 / span 9;
margin-top : 0;
margin-bottom: clamp(4.8rem, 1.43vw + 4.11rem, 6.4rem);
}
.gh-article-title {
grid-column: 1 / span 9;
font-size: clamp(4rem, 2.86vw + 2.63rem, 7.2rem);
font-weight : 800;
line-height : 1;
letter-spacing : -0.03em ;
}
.page-template .no-image .gh-article-title {
grid-column: 4 / span 6;
}
.has-serif-font .gh-article-title {
font-family: var(–font-serif);
}
.has-mono-font .gh-article-title {
font-family: var(–font-mono);
}
.gh-article-excerpt {
grid-column: 1 / span 9;
max-width : 840px ;
font-size: clamp(1.8rem, 0.54vw + 1.54rem, 2.4rem);
font-weight : 500;
line-height : 1.45;
}
.has-serif-font .gh-article-excerpt {
font-family: var(–font-serif);
}
.has-mono-font .gh-article-excerpt {
font-family: var(–font-mono);
}
.gh-article-excerpt .emoji {
color : initial ;
}
.gh-article-image {
grid-column: 1 / span 12;
margin-top: clamp(4rem, 3rem + 3.125vw, 8rem);
}
.gh-content {
–content-spacing-multiplier: 1.5;
position : relative ;
margin-top: clamp(4rem, 3rem + 3.125vw, 8rem);
line-height : 1.7;
}
.post-template .no-image .gh-content {
margin-top : 0;
}
.page-template .no-image .gh-content {
margin-top: clamp(4rem, 2.14vw + 2.97rem, 6.4rem);
}
.gh-content > [id] {
font-weight : 800;
}
.gh-content > :is(p, ul, ol) {
font-weight : 480;
}
.has-serif-font .gh-content > :is([id], p, ul, ol) {
font-family: var(–font-serif);
}
.has-mono-font .gh-content > :is([id], p, ul, ol) {
font-family: var(–font-mono);
}
.gh-article-footer {
margin-top: clamp(6.4rem, 3rem + 10.625vw, 20rem);
}
@media (min-width : 992px ) {
.gh-article-meta {
position : absolute ;
grid-column: 1 / span 3;
}
}
@media (max-width : 991px ) {
:is(.gh-article-title, .gh-article-excerpt),
.gh-content > .gh-article-header {
grid-column: 1 / span 10;
}
.gh-article-meta {
margin-bottom : 32px !important ;
}
.no-image .gh-article-meta {
grid-row-start: 2;
}
.gh-article-meta-inner {
flex-direction: row;
align-items: center;
}
.gh-article-meta .gh-author-image {
width: 64px;
height: 64px;
margin-right : 12px ;
margin-bottom : 0;
}
.gh-article-meta-wrapper {
flex-grow: 1;
}
.gh-article-tag {
margin-top: 0;
}
}
@media (max-width : 767px ) {
:is(.gh-article-title, .gh-article-excerpt),
.gh-content > .gh-article-header {
grid-column: 1 / span 12;
}
.gh-content {
font-size: var(–content-font-size);
}
}
where do I need to make the change for the dropdown menu?
In your navigation page, you add [has_child] right with the name of the menu item. Child items go immediately after the parent and get a [subitem] added to them.
So it will look like
Fruit [has_child]
Banana [subitem]
Peach [subitem]
Desserts [has_child]
Cake [subitem]
Does it work? If not, what does the menu look like?
Would you please open developer tools in your browser (F12, probably) and paste in any console errors?
Uncaught ReferenceError: jQuery is not defined
at (index):405:3
www.abhineetarora.com/:409 Uncaught SyntaxError: Unexpected end of input
content.js:1 [Report Only] Refused to compile or instantiate WebAssembly module because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”.
This is the header under Code injection
/* For Dropdown Menus */ li.menu-item-has-children { position: relative; padding-right: 25px!important; display: inline; } li.menu-item-has-children:hover ul.ghost-submenu { visibility: visible!important; opacity: 1!important; top: 50px!important; } .menu-item-has-children svg { position: absolute; right: 0px; top: 60%; transform: translate(-0%, -50%) scale(1.1); } ul.ghost-submenu li { list-style: none; white-space: nowrap; } ul.ghost-submenu { border-radius: 5px; position: absolute; visibility: hidden; z-index: 1; opacity: 0; top: 30px; transition: 0.3s; box-shadow: 0 1px 5px 0 rgb(0 0 0 / 14%); max-width: unset !important; /* Edit below to adjust Dropdown Menu positioning and color */ left: 0; margin-top: -15px; padding: 5px 20px 10px 10px; background: #fff; color: #000; }This is the Footer under Code injection
You’ve got an error in your footer code injection. That’s causing jQuery not to load.
That part should be
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>