- This topic has 6 replies, 2 voices, and was last updated 7 years, 8 months ago by
.
Hi,
I have two questions:
- I am trying to make my logo full height on all my pages. I have succeeded with this on the home page and on the sticky navbar (see screen shot 2), however not on the rest of the pages when at the top, then there’s a gap at the top and bottom (see screen shot 3) even though I have played around with marin and padding a lot. Is there a way to achieve this?
- Is it possible to have a mobile-specific logo?
I understand if you can’t help with customised styling so I apologise if this is outside what your support covers.
Thanks in advance!
Solution for this topic
Hi @Elise_jansson,
I hope you are well today and thank you for your questions.
I am trying to make my logo full height on all my pages. I have succeeded with this on the home page and on the sticky navbar (see screen shot 2), however not on the rest of the pages when at the top, then there’s a gap at the top and bottom (see screen shot 3) even though I have played around with marin and padding a lot. Is there a way to achieve this?
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Cod
#header-navigation .sh-nav a { padding-top: 21px; padding-bottom: 21px; } .sh-header .menu-item:nth-child(7) a { margin-top: 18px; }Is it possible to have a mobile-specific logo?
Yes we can achieve that developing custom CSS code.
For this please share me the logo image URL from your site that you want to display on mobile.
Best regards,
Shufflehound teamHi, thank you so much, that’s perfect.
Here is the link to the mobile logo:
http://millarcallaghan.co.uk/wp-content/uploads/2018/04/Logo-white-04.png
Also, I’ve been wondering how you get the blog post photos in the footer widget as on you page (see attached screen shot), I can only seem to get a list of the blog post without the option for circular images.
Also, my header/logo always looks perfect on my home page but never on my other pages. It is not as responsive there and the logo gets too big. What’s the difference in the code?
I’ve tried to upload a smaller logo but then it ends up being bad quality.
Solution for this topic
You can display shared logo on mobile by using the following CSS code on your site.
@media (max-width: 1025px){ .sh-header-mobile-navigation .header-logo img{ display: none; } .header-logo-container .sh-table-cell { background: url("http://millarcallaghan.co.uk/wp-content/uploads/2018/04/Logo-white-04.png") no-repeat center; width: 386px; height: 114px; background-size: 100%; max-width: 100%; } }To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
Yes of course! Sorry about that, and thank you so much for the help 🙂
You are most welcome 🙂
