Menu bar, Menu item background opacity CSS

  • Resolved jerry00769

    (@jerry00769)


    7 years, 4 months ago

    Hello,
    I would like to ask you for a help with background opacity. No problem for menu bar. I found css file “wprmenu.css” and added some parts for menu bar as

    follows:

    #wprmenu_bar {
    opacity: 0.85;
    border-top:1px solid #67826A;
    border-right:1px solid #67826A;
    border-bottom:1px solid #67826A;
    }

    #wprmenu_bar .menu_title {
    font-family: “Verdana”, Times, serif;
    }

    Everything is OK for me. But… Is that a chance how to add any backgrounfd opacity and font “Verdana” into the Container (menu items)?

    Thanks so much for your help in advance.

    Jerry, CZ

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Kshirod Patel

    (@kshirod-patel)

    7 years, 4 months ago

    Hello @jerry00769 ,

    The thing what you are looking for can be achieved by doing some custom css. You can simply use this css

    html body #mg-wprm-wrap {
    background-color: rgba(226, 232, 227, 0.6);
    font-family: Verdana, Geneva, sans-serif;
    }

    if that doesn’t work you can use !important in the css like this

    #mg-wprm-wrap {
    background-color: rgba(226, 232, 227, 0.6) !important;
    font-family: Verdana, Geneva, sans-serif !important;
    }

    Note: The rgba is the color what you have used in you site. Change the rgba color as per your requirement.

    Thread Starter jerry00769

    (@jerry00769)

    7 years, 4 months ago

    Hello @kshirod-patel,

    great job. Many thanks. It works perfectly.
    Last question for you. At this monet, I would like to change a little bit hambruger icon size near the title bar. It so big…

    Have a nice weekend.

    Kind regards

    Jerry, CZ

    Plugin Contributor Kshirod Patel

    (@kshirod-patel)

    7 years, 4 months ago

    Hello @jerry00769 ,

    Glad to know that it worked for you. You can simply put this custom css in your css file to make the hamburger menu size to 20px.

    body .wprm-wrapper .hamburger-inner, body .wprm-wrapper .hamburger-inner::before, body .wprm-wrapper .hamburger-inner::after {width: 20px;}

    If you really liked the plugin or support then please give us review. it really means a lot for us. You can give your review here

    Thread Starter jerry00769

    (@jerry00769)

    7 years, 4 months ago

    Great idea.

    I tried to change like this:

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 22px;
    height: 2px;
    background-color: #000;
    border-radius: 2px;
    margin-bottom: 2px;
    margin-top: 2px;
    }

    but “X” close is not so good 😉

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Menu bar, Menu item background opacity CSS’ is closed to new replies.