Hi all,
New here and to Newsmag.
I’m customizing the theme. I use the main menu at the top, and not the ‘top’ menu. (style 9 minus the top menu).
I’d like to give the menu a ‘tabbed’ look. I found a start to doing that with this…
.menu-item.menu-item-type-taxonomy a {
border-radius: 10px 10px 0 0;
}
That doesn’t do it completely though, this doesn’t seem to apply the css to the very first link on the left, and does apply to the drop down menus… so when you mouse over the dropped links, they have the ‘tabbed’ look but shouldn’t, it doesn’t look right.
Does anyone here already have experience at making the main menu look like tabs? If so, can you share the css?
Thanks,
Chris
Ok, Scratch that. I found something I would much prefer over my idea…
I’ve found found several newsmag themed sites that have a mouseover effect on the main menu that causes a colored underline to appear. Here’s one example: http://www.moodlenews.com/
Can you tell me how that is accomplished?
Thanks,
Chris
Hi
The indicated site uses Newspaper theme which have a different implementation for header styles, that’s why appear that affect. However this can be done using custom css in theme panel > custom code > custom css: http://screencast.com/t/MY1mVJ5x
.sf-menu > .current-menu-item > a:hover, .sf-menu > .sfHover > a:hover{
border-bottom: 4px solid red;
}
Let me know how it goes.
Thanks!
Hi AndreiL,
Thanks for helping… it doesn’t seem to be working though. http://n4s.us
I spent the last hour or so going through my custom css and took my customizations out for a while to see if something I did is conflicting with it, and I don’t think so. Couldn’t find anything.
Chris
Oh… experimenting more. I think it does ‘work’, but it’s not visible because the underline/color-bar is so low. It looks like the links have a padding-bottom of 15px (looking at it with a css viewer browser extension).
I tried reducing the padding, but haven’t been able to figure out the right css for that…
If you have any thoughts on how to center the text in the main menu, that would be helpful as well.
Thanks again for your help. Tagdiv support is great!
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.]
“…but I have this obsessive need for my website to look crisp and work perfectly”
I know exactly what you mean 🙂
I think we are dealing with the same issue. Hopefully we’ll hear a fix here shortly,
Chris
Hi
Sorry fr that, i missed a selector.
Replace the previous css with this one, now should work fine: http://screencast.com/t/OLXmMTCe
.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;
}
@DaneOLeary unfortunately at the moment this is the fastest solution that i can provide. In order to work as you explained above are required many customizations in header’s css code. This implementation was designed for Newspaper theme and its accommodation at Newsmag require a different approach for the menu css code.
If you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you as we cannot offer custom modifications at the moment.
Thanks!
DaneOLeary,
I’ve been playing around with this.
/*adjust level of menu underline*/
li.menu-item a {
height: 35px;
}
/*adjust underline width and menu item spacing*/
li.menu-item a {
padding-left: 2px;
padding-right: 2px;
margin-left: 11px;
margin-right: 11px;
}
in addition to the css AndreiL provided. It seems to fix the problem of the line being low and pushing sections under it lower on hover. I haven’t found it to cause any other problems, but test carefully. I don’t use a top menu, so I don’t know if it would have an affect on that.
This is just me trying to hack in a fix, I am not a css expert, so it might be ‘wrong’, technically speaking,
Chris
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.
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.
Ah, ok, I’m not using the megamenu’s or the tags, so I didn’t run into that.
Maybe AndreiL will have a better way to target the css. Sorry that didn’t work straight off –
Chris
Hi
You can use this css to overwrite the height applied for categories tags displayed in mega menu: http://screencast.com/t/vcaPk87FAvGk
.td_mega_menu_sub_cats .block-mega-child-cats a{
height: inherit;
}
Thanks!
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.
Hi
Indeed the last css don’t apply at the category tags for each post, sorry about that I missed some selectors. To achieve that replace that css with this one: http://screencast.com/t/OsUfXSWnCl
.td_mega_menu_sub_cats .block-mega-child-cats a, .td_block_mega_menu .td-post-category{
height: inherit;
}
Thanks!
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;
}
li.menu-item a {
height: 50px;
}
.td_mega_menu_sub_cats .block-mega-child-cats a, .td_block_mega_menu .td-post-category{
height: inherit;
}
Hi
Try this css: http://screencast.com/t/yRso9vRu2i6c
.td-mega-menu ul .td-next-prev-wrap{
margin: 0px 20px 0px 0px;
top: 13px;
}
Thanks!
Perfect, thank you very much.
Navbar is now exactly the way I’d wanted it to be!
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.
Hi
All this customizations require custom modification in theme files and unfortunately i can’t provide a solution now. Basically the html structure must be changed in order to generate a unique class depending by the primary category then use that class in css to apply the desired style.
In order to achieve this you will need some serious customizations which involve good coding skills and lot of time and tests.
If you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you as we can’t offer customization services at the moment.
Thanks for your message
