Where + how to edit Wordpress CSS to create a dropdown scrollable submenu in Wordpress? - wordpress

I am a writer and I have menu for my chapters list on my website of 30+ chapters and currently it annoyingly looks like this:
current website
As you can see it cuts off, and Wordpress annoyingly doesn't have a feature that turns it automatically scrollable. There are 30+ chapters and you have to keep scrolling, scrolling, scrolling down to see them all.
I have found some good looking solutions on StackOverflow but don't know where and how to apply them on Wordpress.
If anyone could talk me through literally step-by-step 1. where to find the CSS of my Wordpress site 2. the code I'll need 3. where to paste it 4. if there's anything I need to add to the navigation block's inidividual "Additional CSS Classes" part like so: Additional box in the corner and anything else I need to do. I would be super grateful!
One of my fears is just dumping a bit of code somewhere in the middle of editable CSS and screwing up my entire site! My CSS knowledge is super beginner so laymans terms is very much appreciated thanks :)
I tried using Plugins (those seem even more confusing than CSS) and have considered using Elementor too but I have Googled and YouTubed, trying to find a solution and nowhere has something as specific as what I'm looking to achieve frustratingly.
I tried following this youtube video: https://www.youtube.com/watch?v=73XjO7hFZaw but didn't know what my "Target Element Selector" was, even when I went into Inspect on Chrome, all I found was this

Related

Finding source of logo slider

I seen this logo slider on a lot of websites and i need help to either locate where to get it or any ideas to make it.
I tried to look through the sourcecode and can't how it is made.
I guess it is some sort of plugin or theme but not sure?
Example of one of the websites: https://www.webfx.com/

How do I Integrate Two Menu Wordpress Plugins?

I'm looking to have a logo with a drop down menu on my site, http://sheisbiddy.com/home/ I found a widget that changes a menu item to a photo (it's just called Menu Image) that worked beautifully. Then I added another widget (Max Mega Menu) to be able to add a dropdown menu and really customize it and make my life easier (less coding! Yay!). Problem is that it overrode the other widget and now there isn't a logo. I tried using the custom css feature to add it but it still isn't working (I asked about that in a different question here: http://bit.ly/1Pj1S3e). Is there anyway to get these plugins to play nice together? Or is there a better way to get both the logo and dropdown menu? I appreciate any advice you have! This is the last step until this site is ready to go.
If its a plugin conflict, theres a good chance its because there is conflicting styles in each one, and one takes priority over the other. Finding those styles and commenting them out or deleting them might solve your issue.
In a worse situation, there could be a name conflict, but that seems doubtful here.

Horizontal scroll - syntaxhighlighter

I was googling to find a solution for this forever, I was so close but still can't find the problem...
The closest solution I found was at this site But:
I want exactly the opposite of what this guy posted: Automatic line break in js SyntaxHighlighter
He wants instead of horizontal bar to break the code down, but what do I want is instead of breaking the code down, to display a horizontal bar.
I've used SH on multiple projects and never actually had this issue till now.
I've installed it in wordpress as a plugin in a custom theme, I modified the theme css file(s) and the syntax highlighter's file(s) (.css), but still nothing's going on.
Here's a screenshot
If you have any suggestion what the problem might be, please tell me - any help is appreciated.
I think what you are looking for is a combination of overflow and white-space css properties.
pre {overflow:scroll;}
.pre-wrap {white-space:pre-wrap;}
Please see the footle here

Sidebar pushed below content in individual post (Wordpress)

I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)

Wordpress slideshow plugin with scrollbar, autoplay and lightbox

I have been asked to build a portfolio website for a photographer. The main page contains a slideshow of the photographer's best work, I have used an autoplaying NextGEN SmoothGallery with Lytebox. After some customization of the plugin, this works.
However, the client has requested a category selection above the main slideshow and a scrollbar below the image. They also want part of the previous and next images to be visible, not just the image in focus. The image here illustrates what I mean.
I have searched and searched, but cannot find a plugin that would do this. Can anybody help, please?
The trouble is, I doubt there is a plugin around that would do this, and it's really not going to be a case of "here's the code to do that, just drop it in and you're flying".
If it were me, I'd probably write the whole thing myself, because if I'm honest, I've never used the NextGEN SmoothGallery plugin, and wouldn't want to root around all the code when I've got a simple idea myself;
A bit of PHP that outputs the list of categories, and then an unordered list of the X most recent items, one list for each category.
Then I'd use jQuery (and probably the jCarousel plugin) to create the slideshow for a single list, and add click handlers to the category links which simply 'swap in' the correct list into the current carousel.
Finish the whole thing off with some CSS.
Does any of that sound like something you'd be familiar with?

Resources