Got the hover colors going right now. I’d still like to add a little padding to the buttons though.
Hi russel,
Sure just use custom CSS styles to overwrite anything you’re not happy with, thats what I do.
Of course the plugin is extremely customisable but its never going to have everything in there or the admin would be impossible to use so some design is left up to the site owner to play around with themselves.
All the best
Very good, I appreciate that.
I am having trouble finding the style classes as they are labeled in the source code. The individual components’ style classes are not to be found in any of the plugin stylesheets. How can I add padding to the buttons? If I use custom css, what class would I include and how would I write that custom css? Surely I can’t just make up classes and ids of my own since the php engine would not know what component it is. How would I write the custom css? (I should know this by now but I’ve been using the stylesheets of plugins and themes all along and not using the custom css option) Thanks again!
Hey russell,
You can easily find the class names by using the browsers inbuilt Web Developer tools (found by hitting F12) and then inspecting the button itself.
The button for example is simply #responsive-menu-button but t has some inner elements that you may wish to use but again these can easily be found as mentioned above.
The FAQ page below explains how to use these tools a little further:
https://responsive.menu/faq/how-do-i-find-the-css-of-my-menu/
All the best
As mentioned I’ve been looking through the source code and I find that the id and class of .responsive-menu-item would be the way to go.
So I would write:
.responsive-menu-item { padding-top:2px;padding-bottom:2px; }
like this or should I do it for each button item number? Thanks again.
Hi russel,
Unfortunately that is completely dependent on what you want to achieve exactly so I wouldnt be able to answer that question but I definetely wouldnt advise doing it for every single menu item as it doesnt make sense to do so.
The best person to know the answer would be your web developer or yourself (if that is you) as it is custom CSS so is outside the scope of my plugin in particular.
Hope that helps
I know how to write css, just as it is above. I tried it in the css of “menu to hide” option mentioned in the documentation but all that did was disappear the menu leaving only icons on the opposite page side and the hamburger was gone. I’ll try it in the custom css area and see what happens.
I don’t understand. You say that custom css is out of plugin’s scope? Then why is there a custom css tab & input box? I often learn from trial and error when I can’t get solutions. Sometimes it works out, others not. :o) I was only asking how it should be written in the custom css box. If written as normal css code then no problem. It would be just what I mentioned in my prior post. In which case I’ll have wait for my purchase on payday this week since that option is disabled at present.
Thanks
I also tried it in the theme main stylesheet, no go. I tried it in the plugin’s main.css stylesheet, no go as well. I’ll find a work around eventually but if it doesn’t work from the plugin main.css, it makes no sense to me, something else is overwriting my css during page load.
.responsive-menu-item {padding:2px 0px 2px 0px; }
Hi there,
Are you aware of CSS points scoring? For example an ID is worth something like 100pts and a class is worth 10 so if there are any more specific css selectors in play then they will take presedence over yours which is why you need to use browser developer tools or similar to find out what is currently on the site and therefore what you need to do.
You can of course just use the !important tag to force the override as below:
.responsive-menu-item {
padding:2px 0px 2px 0px !important;
}
The CSS of menu to hide option is just for the class or element name of the menu you want to hide as explained in the doc page below:
https://responsive.menu/docs/initial-setup/hide-current-menu/
All the best
My close this thread or resolved link is not there so close this if you can. Sorry for the bother … take care now.
Hey russell,
No problem – did adding the !important tag or making your css definitions more specific fix it or do you still need more help?
Im back at a laptop now so I can check the site and CSS you need more specifically now if needed.
All the best
