Menu bar customizations

Home Forums Iconic One Pro Support Menu bar customizations

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #4918

    Hello, I am trying to customize the menu bar on my site, I’m wondering what is possible with custom CSS.

    – Can I make it so a particular tab in the menu is always highlighted/selected?
    – Is it possible to make the menu bar thinner?
    – Is it possible to display the menu bar in another location, like above the header image?
    – Is it possible to align the items in the menu bar to the right, instead of the left?
    – Can the menu bar be displayed as a drop-down on desktop browsers like it is on mobile browsers?
    – Instead of “Menu” displayed as the default in the mobile drop-down, can other text be used?
    – Can the drop-down on mobile browsers be adjusted so that it is not as wide?

    Thank you for your help!



    1) Yes, but it will require menu item id, which you can find from Right click -> “inspect element” in chrome, then use like this

    #menu-item-152 > a {
    background: #0099ff;


    .themonic-nav li a {
        line-height: 3.2;

    3) Will require a bit of custom work


    .themonic-nav ul.nav-menu, .themonic-nav div.nav-menu > ul {
        text-align: right;

    5) Will require a bit of custom work

    6) Line 159 selectnav.js inside js folder

    7) Adjust percentage

    .js .selectnav {
        width: 96%;

    All the above CSS code can be used in Custom CSS in the live customizer or in Simple Custom CSS plugin. If you require custom work kindly email [email protected]


    Thank you very much for your help!


    In addition to the width, is there a way to customize the height? The mobile menu bar on the themonic site is much thicker than the one on my website, and I would like to adjust this. Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.