Position of logo in header
Home › Forums › Pro Support › Position of logo in header
- This topic has 13 replies, 2 voices, and was last updated 4 years, 11 months ago by Kieran Morris.
-
AuthorPosts
-
June 8, 2019 at 1:25 pm #67021Kieran MorrisParticipant
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 #67033Peter FeatherstoneParticipantHey 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 #67032Kieran MorrisParticipantJune 8, 2019 at 2:10 pm #67031Kieran MorrisParticipantI 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 #67030Peter FeatherstoneParticipantHey 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 #67029Kieran MorrisParticipantMany 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 #67028Peter FeatherstoneParticipantHey 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 #67027Kieran MorrisParticipantApologies 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 #67026Peter FeatherstoneParticipantHey 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 #67025Kieran MorrisParticipantHi 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 #67024Peter FeatherstoneParticipantHey 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 #67023Kieran MorrisParticipantPeter, that works like a charm – thank you!
K
June 8, 2019 at 6:59 pm #67022Peter FeatherstoneParticipantHey Kieran,
Excellent, I’m glad you got it working! 🙂
Peter
-
AuthorPosts
- The topic ‘Position of logo in header’ is closed to new replies.