How to adjust logo size (larger)

WordPress Themes and Plugins Forums Axon WordPress Theme How to adjust logo size (larger)

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #498
    Anonymous
    Guest

    Could you please tell me how to adjust the size of the logo? i would like to make it larger, thanks.

    #1269
    admin
    Participant

    Hello,

    You can adjust the room for large logo by editing style.css. Code is as follows,

    File: axon/style.css
    Line Number: 906

    .site-branding {
    float: left;
    overflow: hidden;
    width: 250px;
    word-wrap: break-word;
    }

    .main-navigation {
    float: right;
    max-width: 75%;
    }[/CODE]

    Please adjust [B]width[/B] and [B]max-width[/B] according to your needs.
    Large logo means, you are leaving small room for Menu so you have to keep the top level menu items accordingly.

    Thanks[CODE].site-branding {
    float: left;
    overflow: hidden;
    width: 250px;
    word-wrap: break-word;
    }

    .main-navigation {
    float: right;
    max-width: 75%;
    }[/CODE]

    Please adjust width and max-width according to your needs.
    Large logo means, you are leaving small room for Menu so you have to keep the top level menu items accordingly.

    Thanks

    #1270
    Anonymous
    Guest

    Related to the issue above: please check the menu in the header @ http://www.farlowlands.com

    The orginal theme header has quite some height into it (especially at a 768×1024 px screen)… I therefore made some adjustments in a child theme:

    /* VERT ADJUST HEADER */
    .sitebar-default {
    margin-top: 60px;
    position: absolute;
    }
    .header-custom {
    background: none repeat scroll 0 0 #F0F0F0;
    min-height: 140px;
    width: 100%;
    }
    .single .header-custom,
    .page .header-custom {
    max-height:140px;
    }
    .sitebar-inside {
    background: none repeat scroll 0 0 #F5F5F5;
    height: 100px;
    }

    However, when the browser draws the menu, the menu-items are first drwn to low (original height?) and then animated towards the new height.

    How can I fix this (i.e. how to edit initial height)?

    Thank you in advance!

    #1271
    admin
    Participant
    evanderavoird, post: 792, member: 323 wrote:
    However, when the browser draws the menu, the menu-items are first drwn to low (original height?) and then animated towards the new height.

    How can I fix this (i.e. how to edit initial height)?

    Thank you in advance!

    I have forwarded this question to our developers.
    We are also thinking to control the Menu Animation and Height via some easy to use builtin options.

    Thanks

    #1272
    Anonymous
    Guest

    That would be nice; looking forward to the solution.

    #1273
    Anonymous
    Guest

    Still looking forward ;-)

    #1274
    admin
    Participant

    Sorry for the delay.
    I will try to post the quick solution for you as the next release is not in the Roadmap at the moment.
    Thanks

    #1275
    kananga313
    Participant

    Hi,

    I have a similar question.

    I have changed the logo size as per above

    .site-branding {
    float: left;
    overflow: hidden;
    width: 400px;
    word-wrap: break-word;
    }
    .main-navigation {
    float: right;
    max-width: 60%;
    }

    but on a mobile the logo sticks out of the side (see attached). This means you do not see the whole logo

    http://i299.photobucket.com/albums/mm288/Barlow_photos/Screenshot_2015-07-14-16-50-00.png

    What I would like to do is have the logo full width and move the menu below (retaining the background grey) – how can this be achieved, with the logo resizing correctly on a mobile device?

    best regards

    #1276
    admin
    Participant

    Hi,

    Can you share your blog URL. So i will be able to guide you exactly after looking into source code.

    Thanks

    #1277
    kananga313
    Participant

    Hi

    chiangmaivisa.com/pennisula/

    dont worry about moving the menu below

    I just need know how to resize the logo without it extending to far on a mobile

    #1278
    admin
    Participant

    Hi,

    You should adjust the width according to viewport. For Example, you can use the following code snippet for the mobile devices.

    /* For Very Extra Samll Devices */
    @media screen and ( max-width: 359px ) {

    .site-branding {
    width: 200px;
    }

    }[/CODE]

    Thanks[CODE]/* For Very Extra Samll Devices */
    @media screen and ( max-width: 359px ) {

    .site-branding {
    width: 200px;
    }

    }[/CODE]

    Thanks

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