Hi Vladimir. Welcome to the Hueman forum. If you want to use the theme’s build-in functionality and responsive styling, probably the closet you’ll come to what you want is using the theme’s sidebar child menu layout. Not exactly the same, but close, and a whole lot easier than doing it manually. If you’re set on copying the existing menu and placing it in the sidebar, the basic steps to accomplish that are outlined on the Codex Navigation Menus page. That process is relatively straight-forward. The bigger issue, at least in my mind, will be trying to work out the responsive styling for mobile views. The responsive styling for the existing menus is in the theme style.css file. The styling for the sidebars in in responsive.css. It’s doable; just depends on how much time and effort you want to put into it.
Hi bdbrown, thank you for the quick response. You’re an absolute legend!
I looked at using the Child Menu, but as far as I could tell that’s only done in the primary (left) sidebar, is it not? My understanding is that in the link above it’s on the right because it moves the primary sidebar.
Anyway, I’ve come up with a simple-ish workaround that works for me.
This is the CSS (colors experimental):
.sidemenu a {
color: #fff;
background: #3b8dbd;
display: block;
line-height: 300%;
padding-left: 15%;
font-family: "Verdana";
font-weight: 600;
}
.sidemenu a:hover {
background-color: #2e3035;
}
Unfortunately to keep line spacing it means I need to wrap each menu item in their own tags, but it works and looks good enough to me (plus it inherits scaling from the sidebar).
Is there anything outright wrong with the code? Just because it works, doesn’t mean it’s necessarily “good”. 🙁
And one more thing – is there a way to change the highlight of a link when the user is on that page, like the nav menus (and the Child Menu) do?
Those menus seem to use php, which I know nothing about. Is there even a way for me to implement a feature like that with the simple code I’m using?
Am I trying to have my cake and eat it too!?
Thank you for your time!
~ Vladimir
Yes, the demo page I linked has the primary sidebar on the right. It’s one of the theme page layout options.
it works and looks good enough to me
That, I think, is the true test. In programming there are many ways to accomplish the same end. Two people may code something differently to accomplish the same objective. That doesn’t mean one of them is right and the other is wrong. To some, coding is a job. To others it’s more of an art. And “good” is a relative term. There have been, and will be, many debates on what constitutes “good” code, but this forum isn’t the place for that discussion.
The active menu item in, for example, the header menu can be targeted with css:
/* header nav current item color red */
#nav-header .nav li.current-menu-item a { color: #f00; }
The “current-menu-item” class is set dynamically on the current page menu item by the WP “wp_nav_menu” function. See this Codex page for more information.
Hope that helps.
Well, I thought I had it down, but LIFE loves little curveballs, doesn’t it? This one’s all on me, though.
@bdbrown, my problem is resolved, this next part is only for someone who may stumble across this thread at a later date so you may skip to the end.
I mistakenly thought that I could use the current-menu-item to change the attributes of any object on the page. Since I was very clearly not the only one with similar questions, this is how current-menu-item works:
– It only applies to menus. With the code above, all I did was create a colored box with all the attributes I wanted and duplicated it however many times I needed.
– What wp_nav_menu does is add a class to a menu link with the same url as the current page (hence the name).
– The reason it does this is to distinguish that link from the others in the menu.
– You can then edit the .current-menu-item class directly and have those changes apply only to the specific link.
– What I ended up doing (and what I should have done in the first place) is create a Custom Menu, place it in a widget and then customise the hell out of it with custom CSS.
@bdbrown Thank you for the phenomenal response speed and taking the time to nudge me in the right direction. This experience has been better than 80% of even the paid products (themes and otherwise) I’ve had the pleasure (and displeasure) of using. For 0 dollars. I will sing your praises until the day I no longer use WordPress. Thank you!
(Even so, I hope to not have another reason to talk to you on these boards again. <3 )
You’re a legend.
~ Vladimir
