Logo Placement Options for Natural Herbs Theme

Home Forums All Other Themes Logo Placement Options for Natural Herbs Theme

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #143333
    Arvind Shinde
    Participant
    • Topics: 1
    • Replies: 1
    • Total: 2
    Member since: January 8, 2020

    Hello Support Team,

    I am working on the website https://siddhaorganics.com/ where I used the Natural Herbs theme.

    As you could see, I would like to use an image for the logo instead of name.
    Logo being circular in design, it looks relatively small in that white header.
    Is there way if I can reduce that white header only to the right half showing all the menu options.
    And on the left half a way to place this logo with a bigger size.

    I tried increasing the dimensions of the logo, but then it also increases the height of the white header which then looks ugly.

    Could you please help me with this.

    Thank You.

    #143417
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24481
    • Total: 24481
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    .header, .head_inner .center { background:none;}
    .has_trans_header.home #topmenu { background-color:#fff !important;}
    .logo { width:13%;}
    .logo img { width:auto; height:auto;}
    .head_inner .center { padding:0;}
    #topmenu ul li a { padding:40px 21px;}

    Regards,
    Chris

    #143547
    Arvind Shinde
    Participant
    • Topics: 1
    • Replies: 1
    • Total: 2
    Member since: January 8, 2020

    Hi Chris,

    Thank you very much for your help.
    I incorporated you changes and it looks now good on the desktop and tablet view.
    However, on the mobile screen view the logo image still looks relatively smaller.
    Is there a way to fit this logo in a similar way for the mobile view.

    Regards,
    Arvind

    #143643
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24481
    • Total: 24481
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:479px) {
    .logo { width:35%;}
    .logo img { margin-bottom:0 !important;}
    }

    Regards,
    Chris

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