Adding a Dropdown Menu in the Solo Theme

Using Ghost
22

still not working… Getting the below error

(index):405 Uncaught ReferenceError: jQuery is not defined
at (index):405:3

23

You need to put the jquery loading code (the line I just corrected above) before the dropdown menu code, because the dropdown menu code needs jquery to work.

24

Yesss! Cathy, it worked… Thanks a lot but how can I move Tech to the left side so that it starts exactly below Self?

Screenshot 2022-10-19 at 23.32.09

25

You need to have this in your css: (inside style tags)

Change this part of the header:
ul.ghost-submenu li { list-style: none; white-space: nowrap;}

to this:
ul.ghost-submenu li { list-style: none; white-space: nowrap; margin-left: 0!important}

26

Thanks, it worked.
Also, how can I format the text of my post on the website to be aligned to Justify.

27

You’ll need to add a css selector. Here’s a tutorial How to use Code Injection in Ghost

1 Like
28

Thanks
Will Check this out.

29

Hello! I tried this approach and I am encountering a few issues. the url to my site is this https://www.lostintheswirls.com/
The drop down is visible but the tabs are not (in the first main tab) The second main tab is not visible. Is it because of the size of the bar?
I think I need a code-injection only solution. I copied the code from the suggested and the configuration of my navigation system is like this:

NavigationScreenshot
NavigationScreenshot2680×1336 341 KB

Hopefully I’ve included all the info. Thank you!

30

Yeah, so the problem is that this theme tries to put navigation items into a built in drop-down. (A bunch of Ghost themes now do that. It’s a feature, until you try to add dropdowns by code injection.) That javascript (which runs automatically in this theme) is trying to relocate navigation items, and so is your code injection. They don’t play well together.

Are you able to load a custom theme? Or does it have to be all code injection for any solution?

1 Like
31

Just for fun, try this at the very top of the Ghost header code injection:

<script>
    const dropdown = () => console.log('blockity block block');
</script>
<style>
@media (min-width: 768px)
   body .gh-head-menu .nav>li {
      opacity: 1!important;}
</style>

The script part breaks the built in dropdown function (by getting declared before it). That /might/ be enough to let your code run. (It’s possible the css selector in the second part will need tweaking - the goal at this point is just to get the built-in navigation rearrangement to leave your header alone so that your code injection can run.)

1 Like
32

ok, now I can see both tabs but not words underneath, is it just a matter of color? as it looks like the link is there.
I am not 100% sure I can upload a custom theme. I’ll investigate.

33

More for the style section:

.gh-head .nav>li.subitem a {
 color: black!important;
}
34

Update: Looks like this breaks the mobile screen size dropdowns. (The dropdown.js function being overridden probably handles them.) I don’t have more time to put into this today (gotta do some client work), but will try to come back to it when the work lets up a bit.

1 Like
35

Thank you very much. This was very helpful! I tried changing the background and color here and it seems to be doing the trick. I will keep testing it to make sure nothing is broken. Thank you again!


  /* Edit below to adjust Dropdown Menu positioning and color */
    left: 0;
    margin-top: -15px;
    padding: 5px 20px 10px 10px;
    background: #000;
    color: #111;
}
1 Like
36

You are right, it looks like it is preventing the menu to work in the mobile version. :confused: Any idea of how to fix it?

37

Yep.

You’d want to pull the dropdown.js code out of @tryghost/themes/shared-theme-assets and add back the functionality except the part that rearranges menu items into drop downs when not on mobile.

I probably won’t have time for work on that today, however. :(

1 Like