# Adding a Dropdown Menu in the Solo Theme

**URL:** <https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496>\
**Category:** Using Ghost\
**Created:** [October 17, 2022, 1:26am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496 "2022-10-17T01:26:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 17, 2022, 1:26am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/1 "2022-10-17T01:26:13Z")

</div>

Hi All,  
Can anybody please help me in adding a dropdown menu in the newly launched theme “Solo”?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 17, 2022, 1:41am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/2 "2022-10-17T01:41:31Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 17, 2022, 7:10am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/3 "2022-10-17T07:10:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 17, 2022, 9:42am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/4 "2022-10-17T09:42:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 17, 2022, 12:19pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/6 "2022-10-17T12:19:28Z")

</div>

Good catch, @denvergeeks - betcha that’s the problem.

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 7:17am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/7 "2022-10-18T07:17:24Z")

</div>

![Screenshot 2022-10-18 at 09.14.50](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/3/a/3afa93ea8a5329fdfe29179323c45e1016469aa0.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 18, 2022, 10:24am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/8 "2022-10-18T10:24:48Z")

</div>

You need the rest of the footer code in addition to what you have there.

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 11:04am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/9 "2022-10-18T11:04:13Z")

</div>

my website is [abhineetarora.com](http://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.

 ![Screenshot 2022-10-18 at 13.03.06](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/6/86768938dd784d12060e665017a864d5c3059af4.png)

Where am I going wrong?

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 11:05am UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/10 "2022-10-18T11:05:27Z")

</div>

![Screenshot 2022-10-18 at 13.04.45](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/c/2/c2e9d09b49fab374e669441b59521ad642f003f7.jpeg)  
This is the footer now. Do I need to write anything in the place of the Target element and other stuff?

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 5:20pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/11 "2022-10-18T17:20:12Z")

</div>

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** : 48 **px** ;

**display** : flex;

flex-direction: **column** ;

}

.gh-article-meta .gh-author-image {

**width** : 72 **px** ;

**height** : 72 **px** ;

**margin-bottom** : 16 **px** ;

}

.gh-article-meta .gh-author-name {

**font-size** : 1.9rem;

**letter-spacing** : -0.01 **em** ;

}

.gh-article-meta .gh-author-name a {

**color** : var(–color-darker-gray);

**text-decoration** : **none** ;

}

.gh-article-date {

**margin-top** : 4 **px** ;

**font-size** : 1.4rem;

**font-weight** : 480;

**color** : var(–color-secondary-text);

}

.gh-article-tag {

**width** : fit-content;

**padding** : 2 **px** 12 **px** ;

**margin-top** : 20 **px** ;

**font-size** : 1.5rem;

**font-weight** : 700;

**color** : var(–tag-color, var(–color-darker-gray)) **!important** ;

**text-decoration** : **none**  **!important** ;

**letter-spacing** : -0.01 **em** ;

**border** : 2 **px**  **solid** var(–color-border);

**border-radius** : 24 **px** ;

}

.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.03 **em** ;

}

.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** : 840 **px** ;

**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** : 992 **px** ) {

.gh-article-meta {

**position** : **absolute** ;

grid-column: 1 / span 3;

}

}

**@media** ( **max-width** : 991 **px** ) {

:is(.gh-article-title, .gh-article-excerpt),

.gh-content \> .gh-article-header {

grid-column: 1 / span 10;

}

.gh-article-meta {

**margin-bottom** : 32 **px**  **!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** : 64 **px** ;

**height** : 64 **px** ;

**margin-right** : 12 **px** ;

**margin-bottom** : 0;

}

.gh-article-meta-wrapper {

flex-grow: 1;

}

.gh-article-tag {

**margin-top** : 0;

}

}

**@media** ( **max-width** : 767 **px** ) {

: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);

}

}

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 5:20pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/12 "2022-10-18T17:20:49Z")

</div>

where do I need to make the change for the dropdown menu?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 18, 2022, 6:09pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/13 "2022-10-18T18:09:43Z")

</div>

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]

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 6:59pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/14 "2022-10-18T18:59:29Z")

</div>

![Screenshot 2022-10-18 at 20.56.35](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/2/c/2c0850543929da7163535c7da75ff8661855a8f1.jpeg)  
 ![Screenshot 2022-10-18 at 20.56.53](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/b/5/b5b93ce0058f4377df184537d1fda990a8d779ca.png)  
Did I do this right?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 18, 2022, 7:35pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/15 "2022-10-18T19:35:59Z")

</div>

Does it work? If not, what does the menu look like?

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 7:48pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/16 "2022-10-18T19:48:27Z")

</div>

![Screenshot 2022-10-18 at 20.56.53](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/b/5/b5b93ce0058f4377df184537d1fda990a8d779ca.png)  
It is coming like this on the website.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 18, 2022, 8:04pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/17 "2022-10-18T20:04:00Z")

</div>

Would you please open developer tools in your browser (F12, probably) and paste in any console errors?

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 8:13pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/18 "2022-10-18T20:13:59Z")

</div>

Uncaught ReferenceError: jQuery is not defined  
at (index):405:3  
[www.abhineetarora.com/:409](http://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’”.

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 8:22pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/19 "2022-10-18T20:22:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Abhineet](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/abhineet/32/19811_2.png) [@Abhineet](https://forum.ghost.org/u/Abhineet)\
**Post date:** [October 18, 2022, 8:23pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/20 "2022-10-18T20:23:23Z")

</div>

This is the Footer under Code injection

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [October 18, 2022, 10:49pm UTC](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496/21 "2022-10-18T22:49:36Z")

</div>

You’ve got an error in your footer code injection. That’s causing jQuery not to load.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/a/b/ab86daaaf8eada981eae94a9db498e3b00296427.png)

That part should be

```auto
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

```

[Next page](https://forum.ghost.org/t/adding-a-dropdown-menu-in-the-solo-theme/33496.md?page=2)