How can I change Navbar's color and size?

Hello.

I buy and use innofit pro.

Look at a similar Discussion, please help as it was not reflected in the reference.

First of all, about the color of Navbar.
How do I make the color of Navbar transparent or translucent?
If possible, colored translucent is good.

Next, about the size of Navbar on smartphone.
Navbar is too big and it is bothersome.
I want to display a little smaller.
It may not be a problem if the color becomes transparent, but the size should be changed.

Customer support or experienced person, please answer.
Tagged:

Comments

  • By the way, I use WordPress.

    I want to make the color of the top Navbar transparent or translucent like the picture.

    Navbar is large on mobile screens.
    The logo is also big.
    I want to make the logo and Navbar a little smaller and change the background color.

    I added various items to the item of additional CSS but it is not reflected.
    So now we have not added anything.

    Below, my site.

    スクリーンショット 2019-06-01 11.13.09.png
    2434 x 2176 - 6M
    スクリーンショット 2019-06-01 11.13.51.png
    664 x 970 - 232K
  • Hi, @filllifeart

    Thanks for contacting us!

    To do this, Go to Appearance => Customize => Additional CSS and add the given below CSS code:

    @media (max-width: 767px){
    .navbar-brand img{
    width: 100px !important;
    }
    }
    body.page .navbar-custom, body.blog .navbar-custom{
        background-color: rgba(0, 0, 0, 0.3) ;
    }

    I hope it will work for you!

    Thanks
  • Thank you.

    It worked well!

    However, a problem occurred again.
    The color when you open the Navbar remains as a preset.
    I would like to match this as well.

    And it seems that the start of the Web is a bit slow, but can it be improved by reducing the image size (resolution)?

    Please continue to support me.
    スクリーンショット 2019-06-01 21.19.40.png
    772 x 734 - 400K
  • Hi,

    To change the color of navbar, add the given below CSS code:

    @media (max-width: 991px) {
    .navbar-collapse, .navbar-collapse.collapse.in {
                    background-color: rgba(0, 0, 0, 0.3) !important;
    }
    }

    Refer below article to speed up your website:

    Thanks
  • Thank you very much!

    The color problem was solved for the time being.

    I will try various speed problems.
  • edited June 2019
    Hi,

    Glad to help you!

    If you like our theme and support, rate us HERE.

    Thanks
This discussion has been closed.