Position of logo in header

Home Forums Pro Support Position of logo in header

This topic contains 13 replies, has 2 voices, and was last updated by Kieran Morris Kieran Morris 3 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #67021
    Kieran Morris
    Kieran Morris
    Participant

    How should I go about setting the position of the logo in the header? I have a vertical logo, which I would like to be aligned on the right of the page in all responsive states.

    Is there also a way for the logo to remain visible when a full screen version of the menu is opened?

    Many thanks in advance for your assistance.

    Kieran

    #67033
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Kieran,

    Unfortunately you haven’t provided me with a site for me to look at.

    Please advise

    Peter

    #67032
    Kieran Morris
    Kieran Morris
    Participant

    My apologies, please see https://kieranmorris.com/

    Many thanks,

    K

    #67031
    Kieran Morris
    Kieran Morris
    Participant

    I am working towards this image: https://kieranmorris.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-08-at-14.08.53.png

    K

    #67030
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Kieran,

    The below CSS should do it:

    #responsive-menu-pro-header-bar-logo {
       float: right;
       padding-top: 50px;
    }

    Please let me know if that helps

    Peter

    #67029
    Kieran Morris
    Kieran Morris
    Participant

    Many thanks, Peter, that’s perfect. Following on from this, is there a straightforward CSS way to reduce the size of the logo as the different responsive states are triggered?

    Kieran

    #67028
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Kieran,

    What do you mean by responsive states?

    If you mean different screen sizes you can target those using CSS media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Alternatively you could try a percentage width image so it changes size with the screensize.

    Please let me know

    Peter

    #67027
    Kieran Morris
    Kieran Morris
    Participant

    Apologies for not being clearer with my question initially. Having looked at the article you linked, I think it would be best to introduce several break points where the logo size is scaled to fit the browser size.

    In an ideal world, I would like to achieve something such as:

    Desktop: https://kieranmorris.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-08-at-16.09.44.png (height 350px)
    Tablet: https://kieranmorris.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-08-at-16.10.20.png (height 250px)
    Phone: https://kieranmorris.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-08-at-16.10.52.png (height 150px)

    How might I achieve this and what elements of the code you linked would need to be adapted to do this?

    Many thanks in advance – your help is proving hugely useful.

    Kieran

    #67026
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Kieran,

    You would just need to use a percentage width image or wrap each of your screensizes using media queries and specify a width at each one.

    Either one of those should work.

    Peter

    #67025
    Kieran Morris
    Kieran Morris
    Participant

    Hi Peter,

    Thanks for your message. I get the gist of media queries, but am lacking in some basic knowledge around how to refer to the logo element in the custom CSS field.

    For example, how do I specify the logo element alone to be targeted by these media queries (my code below is obviously wrong):


    @media only screen and (max-width: 600px) {
    .responsive-menu-pro-header-bar-logo {
    max-height: 150px;
    }
    }

    @media only screen and (min-width: 601px) {
    .responsive-menu-pro-header-bar-logo {
    max-height: 200px;
    }
    }

    Many thanks for your help,

    Kieran

    #67024
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Keiran,

    No problem, it would be:

    #responsive-menu-pro-header-bar-logo img

    I hope that helps

    Peter

    #67023
    Kieran Morris
    Kieran Morris
    Participant

    Peter, that works like a charm – thank you!

    K

    #67022
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Kieran,

    Excellent, I’m glad you got it working! 🙂

    Peter

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Position of logo in header’ is closed to new replies.