Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

Position of logo in header

Home › Forums › Pro Support › Position of logo in header

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 8, 2019 at 1:25 pm #67021
    Kieran MorrisKieran 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

    June 8, 2019 at 1:59 pm #67033
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Kieran,

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

    Please advise

    Peter

    June 8, 2019 at 2:07 pm #67032
    Kieran MorrisKieran Morris
    Participant

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

    Many thanks,

    K

    June 8, 2019 at 2:10 pm #67031
    Kieran MorrisKieran 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

    June 8, 2019 at 2:52 pm #67030
    Peter FeatherstonePeter 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

    June 8, 2019 at 3:34 pm #67029
    Kieran MorrisKieran 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

    June 8, 2019 at 3:36 pm #67028
    Peter FeatherstonePeter 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

    June 8, 2019 at 4:18 pm #67027
    Kieran MorrisKieran 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

    June 8, 2019 at 4:51 pm #67026
    Peter FeatherstonePeter 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

    June 8, 2019 at 6:39 pm #67025
    Kieran MorrisKieran 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

    June 8, 2019 at 6:48 pm #67024
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Keiran,

    No problem, it would be:

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

    I hope that helps

    Peter

    June 8, 2019 at 6:58 pm #67023
    Kieran MorrisKieran Morris
    Participant

    Peter, that works like a charm – thank you!

    K

    June 8, 2019 at 6:59 pm #67022
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Kieran,

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

    Peter

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Position of logo in header’ is closed to new replies.