I realized that something I assumed would be happening with the tweaks mentioned above is actually not occurring. Off the top of my head, this might be more complicated than simply putting code into “Custom CSS”, but hopefully this can be done.

So right now, as the mouse hovers over each of the tabs in my navbar, a colored bar appears, running at the bottom. However, I’d hope that the colored bar would remain on the tab of the category that’s currently active. For example, let’s say that my navbar consists of categories A, B, C, and D. In each category, there are three posts numbered 1, 2, and 3. I’ll identify the categories of posts like this: B2 is the second post in category B, D3 is the third post in category D.

Hopefully you’re with me so far.

What I want to happen is when a person was browsing a category (A-D) or viewing a post, the “active” category’s tab would have the little colored bar fixed, running along the bottom of that tab. It would stay there for as long as the viewer remained on that page or in the category to which that page belonged. When he or she hovered the mouse over the navbar, the little colored bar would appear at the bottom of whichever tab the mouse was hovering over as the code provided above had intended for it to do, but there would also be the fixed colored bar along the bottom of the active tab that would remain no matter where the mouse was hovering because the person is currently on a page that belongs to that category. In other words, that category is still “active”. Then, if the viewer went into another category, the new category would have the colored bad fixed along its bottom because it would now be the “active” category.

Viewing post A2 would mean that category A would have the fixed, colored bar.
Viewing post C1 would mean that category C would have the fixed, colored bar.
Viewing post B3 would mean that category B would have the fixed, colored bar.

I hope this makes sense, I don’t know if I’m explaining it right. The purpose for me wanting this is so that a viewer could glance at the navbar and it would tell him or her which category he or she was currently browsing, or in which category the post he or she was reading belonged.

Again, hopefully I’m explaining this right and I really, really hope this is possible.

No kidding, they’ve been great with answering my questions and I know I wouldn’t get that from most others.

@neotrope I’d actually tried many of the things you suggested. I used both Photoshop and iPhoto to resize images, and when I uploaded my images I’d actually deleted the previous ones first and then uploaded my images, each of which had been named what the originals had been names. I don’t believe I have any sort of lazy load turned on and I’m not using https. I’ve been cleaning my caches several times a day hoping that maybe it was already working and I’m just not seeing it.

I do appreciate all feedback, though. Apparently my coding was all correct, and @Andrei_luca was able to get it working. The only issue I’m having now is that the placeholder image shows up everywhere except on the actual post itself.

That’s what’s driving me nuts right now, because I went and made my placeholder image the same dimensions as each of the ones that were originally there. I went through and made sure each was named exactly as the originals were. Take a look at the no-thumb folder where they’re located, the only way you can tell I changed them just by looking in the folder is by the dates over on the side.

I’ve even double-checked the image files to make sure they’re I sized they correctly. Actually, here’s one of the images when I preview it:

This is just making my head spin.

Still not working.

Here is how the code in td_module is saved right now:

And here’s the sidebar on a post’s page where there should be a placeholder image, but isn’t:

I did clear my cache and browsing history and all that, just to make sure… I have the worst luck.

Here’s part of the code for one of the posts that should have a placeholder image, but doesn’t:

Correct me if I’m wrong, but it would appear that it’s not trying to load any image at all for some reason. I just don’t get it.

Also, I’m not using the child theme. I use the full Newsmag theme.

• This reply was modified 10 years by DaneOLeary.

@catalin-l Thanks for clarifying that for me, I’ve sent my login info to the address you provided. Hopefully you guys can help me figure this out.

I must be stupid or missing something totally obvious because I still cannot get this to work. I’ve officially gone through and replaced every single one of the td placeholder images, making sure that each image is of appropriate size, dimension, and name. Then I went in and changed the code in td_module per your instruction in that other post, and it’s still not working.

It looks like instead of my placeholder image showing up, there’s this teeny tiny little empty square in the upper-left corner of where my placeholder image should be in a sidebar module. For example:

And here’s what my code looks like. I tried it both as you wrote it as well as with the exact name of the files in my no-thumb folder, which means I’ve tried “3-300×160.png” and “td_300x160.png” and neither of them work.

I really hope you can figure out what I’m missing here because I really just don’t understand how this isn’t working. I would just say screw it and give up, but I really need these placeholder images to work.

Sheesh, what a pain… but at least I know how to do it now, thank you.

I would definitely be interesting in implementing Facebook comments. I dislike Facebook and rarely ever use it, but I understand that virtually everyone has a Facebook account and that makes the Facebook comment system seem practical. However, while I’m currently taking a couple intro coding courses on Udemy, I feel like I’m far from being at the level of adding the code that you, @neotrope, have described above. I’m hoping that someone will be able to figure out a more seamless integration. I have a plugin for Facebook comments that I’ve never used because Disqus has been just so ridiculously easy to use.

I cannot, for the life of me, get these placeholder images working. I tried following the instructions you posted at that link and the placeholder image doesn’t show up as a thumbnail nor on the post’s actual page. Do I need to resize my image to every single size that the ‘td’ images are?

@andrei_luca, can you be more clear about what you need me to provide? Is wp-access a file? And where can I find it? As for my login credentials, do you mean what I input to login into the backend of my WordPress site?

I tried clearing the cache (the caching plugin I’m using gave me a 504 error when I tried to delete the plugin’s cache so I just went and cleared my computer’s cache and cookies) and made sure the blocks weren’t offset, and they’re not.

Perfect, thank you very much.

Navbar is now exactly the way I’d wanted it to be!

Splendid, that worked!

Now, one last question for you, @andrei_luca, regarding the darn navbar…

I’m noticing now that there’s a lot of extra space at the bottom of the mega menu than there used to be before I added all of this code. Initially I assumed it was because those elements that you helped me fix were vertically stretched out, but now that they’re the way they should be again, the mega menu still seems to be vertically stretched out. Do you know how I can get it back down to the size it should be?

Here‘s a link to my site again if you want to look and see what I’m talking about.

The following is all the code that’s currently in “Custom CSS” in the Theme Panel:

.sf-menu > .current-menu-item > a:hover, .sf-menu > .sfHover > a:hover, .sf-menu > .td-menu-item > a:hover {
border-bottom: 4px solid #0b9bc6!important;
}

.td_mega_menu_sub_cats .block-mega-child-cats a, .td_block_mega_menu .td-post-category{
height: inherit;
}


Excellent, thanks guys. Sounds much easier than I had anticipated.

@andrei_luca

I really appreciate your help with this!

So that code fixed half of the problem I was having. If you refer to the picture I posted of my mega menu, now the categories that are listed along the bottom of the mega menu (in the picture the bottom arrow is pointing to “ALL”) are no longer being stretched vertically, but the category tags that appear on each post’s picture (in the picture the top arrow is pointing to “Tech Reviews”) are still being vertically stretched.

I know that I had to go into the theme panel somewhere and turn on the option to display category tags in the mega menu, or maybe it was in a certain module… but as I’m sure you’re away, those category tags that appear on each post’s picture aren’t actually there by default. I don’t know if that makes any sort of difference, but in my head I was thinking that maybe the code you gave me didn’t apply to the category tags displayed on each post’s picture because those particular tags aren’t a default component of the mega menu.

Thanks @Andre_luca and @neotrope, I will refer to the documentation.

However, Andrei your images/code aren’t showing up in my browser. Can you post that again?

Darn… almost perfect.

Now I have a new problem, @Andrei_luca. I used your code and the first half of Chris’s code and that made the hover effect perfect with regard to my main menu. The problem I’m now having is with certain elements in the mega menus that appear when the mouse hovers over the navbar. Here’s a picture:

If you look at the category tags at the corner of post images and along the bottom of the menu bar, the box containing the category names is stretched vertically for some reason. So if this is the code I have pasted into “Custom CSS”…

.sf-menu > .current-menu-item > a:hover, .sf-menu > .sfHover > a:hover, .sf-menu > .td-menu-item > a:hover {
border-bottom: 4px solid red!important;
}

li.menu-item a {
height: 35px;
}

… what code do I need to add so that the above code doesn’t affect the category tags — or any of the content — that’s within the mega menus? I don’t want to change anything else in the navbar because it’s perfect, I basically just need some what to confine whatever the above code does to just the navbar without it spreading to the mega menus.

• This reply was modified 10 years by DaneOLeary.

Chris,

I’m somewhat new to coding. Would that be added in the same ‘Custom CSS’ space as the code Andrei provided?

I pasted the code you provided right under the code Andrei provided and it was almost what I wanted, so I tried removing the first half of your code and leaving the second half, but that didn’t work. So I removed the second half and left the first half. The result seems to be exactly what I wanted.

Thanks to both Chris and Andrei. This was definitely a collaborative effort. Now I’m all happy and stuff.

• This reply was modified 10 years by DaneOLeary.

@andrei_luca

I’d been wanting to add that little bar myself. I pasted the code that was provided above in the Custom CSS area and tweaked the color and size of the bar to how I wanted it to look. The problem I’m having now is that the colored bar at the bottom seems to extend the height of the navbar only while the mouse is hovering. This is kind of confusing to explain, so let me try it another way…

The way that I’d wanted that little colored bar to work was for it to appear within each link’s box in the navbar as the mouse hovers over it. By appearing within the box, the overall height of the navbar wouldn’t be effected. However, what seems to be happening is instead of the colored bar appearing inside of the link’s box, it’s appearing below it, which is causing the navbar to be several pixels taller on a hover than it is normally.

I also drew out a little diagram just to make sure I’m communicating this right. The top navbar that I drew is how I was hoping it would be and what I want. The bottom is what’s happening.

This is causing a secondary problem that I’ve noticed, which might not be a big deal, but I have this obsessive need for my website to look crisp and work perfectly. Since the little colored stripe that appears on a hover extends the height of my navbar a few pixels, it’s also messing with my mega-menus. It seems like they’ll start appearing while attached to the navbar at its natural height, but when the little colored stripe appears and causes the navbar to grow a few pixels taller, you’ll see the mega-menu twitch as the stripe causes it to get pushed away from the navbar a few pixels.

Hopefully I have explained this sufficiently so that you guys will know what I mean. Also, I hope I’m not highjacking someone else’s thread, I just figured since my issue is derivative I’d just post my problem in the same thread instead of creating a new one.

[My website is here if you want to see what I mean for yourself.]

• This reply was modified 10 years by DaneOLeary. Reason: had to replace image URL
• This reply was modified 10 years by DaneOLeary. Reason: added link to my website

Hello again @andrei_luca

I was messing around with everything trying to figure out a way to make that error go away and it looks like I was able to do it. When I used the Jetpack shortcode to put that subscription box on my main page using a ‘WP Text’ block in the Visual Composer, I was getting that error in the browser console. So what I did was switch that ‘WP Text’ block to just a standard text block and put the shortcode in there. Once I made that change, the error no longer appeared.

I also noticed that I had my Google tracking code on my website like three different ways: I’d put it in the appropriate space in the Newsmag Theme Panel, in a Google Analytics plugin, and then there was a third plugin too. I’ve removed the third plugin, but I like the stats that the Google Analytics plugin gives me on my Dashboard so I’d prefer not to lose it. Will having my tracking code on my site twice prevent it from working correctly?

Also, now that there are no errors in the browser console, does that mean that my Google Analytics will start working correctly? How can I tell if it’s working? It took like 2 weeks for my bounce rate to drop down to 0.5%, which is when I knew something wasn’t right. Will I have to wait 2 weeks to see if it goes back up to a more reasonable number, or is there another way to see if my analytics are working again?

Really appreciate everyone’s help with this.

So I figured out what that error was. It’s the “Subscriptions” module of the Jetpack plugin. Here’s the thing: I really, really, really want to keep the “Subscriptions” module active. Even if I use nothing else in Jetpack — and I really don’t need any other modules — I want to keep the “Subscriptions” module because it’s been the only way that I can include a way for visitors to subscribe to my site on the main page. If I use anything else, it won’t consolidate my subscribers and allow my to use that single module/widget for all subscription boxes. I haven’t yet found an option for this that’s easier and keeps subscribers all in one place that’s not some third-party service. I don’t want to use MailChimp or Constant Contact or any of those services; I just wanted to use what was built into my WordPress and keep my subscribers in one place so it would be more seamless.

Here’s what I did. I wanted to use the Jetpack shortcode for the subscribe form/box on the main page, which I used the Visual Composer to create. However, I struggled to do this because the Jetpack widgets weren’t available to me when I was using the Visual Composer for my main page, so I added a custom text/HTML block in the Visual Composer, and then typed in the Jetpack subscription shortcode in order to include that little subscription form on my main page. (My website is http://www.daneoleary.com if you want to see this for yourself.) I don’t really understand why using that Jetpack subscription shortcode on my main page that I created with Visual Composer is preventing Google Analytics from working correctly. The home page is the only place where I’ve even used it in that way and I noticed that the error I mentioned above doesn’t appear on any pages other than the home page.

Is there a way to work around this?

@neotrope It actually does show an error. It says “Uncaught SyntaxError: Unexpected token”. Is this an error that might be fixed by what @suport001 told me to do? I guess I’ll go ahead and disable the plugins and then re-enable them one by one to see if there’s one that’s causing this just in case. Hopefully that fixes this as it’s really annoying.

@suport001 How do you check the browser console? I use Chrome as my browser and have very minimal coding experience although I tend to be pretty good at figuring things out and following instruction.

@andrei_luca

I DID IT! OMG I ACTUALLY DID IT!

Seriously, you don’t even understand what a feat this was. I’m not the most technologically savvy person and have never done any coding in my life. The apex of any coding I’ve ever done was the changes to my site’s copyright in the footer, that’s the most complicated thing I’ve ever done. I really thought this FTP stuff was going to be over my head, and I’m even using a CHROMEBOOK as my main computer right now, but I’ll be damned if I didn’t just figure it out… almost by accident!

Anyway, thank you very much for your help. You too, @neotrope. You’ve both been extremely helpful. I’m still in complete shock that I was able to do this.