Add logo and sticky menu to shoreditch theme
-
Hi, we’re using the Shoreditch theme for internetaddictsanonymous.org. We’d like to add a logo to the left of the site title on the top right, and to make the menu header stick.
When we upload a logo through the site identity tab, it appears large and above the site title, making the menu look very awkward. Instead, we’d like it to appear small, to the left of the site title, and centered with the text, like the following: https://internetaddictsanonymous.org/wp-content/uploads/2023/02/Menu-header-example-1024×496.png
We’d also like to make the menu sticky, so that it scrolls down with the visitor.
If someone could suggest what custom css code we could implement, it would be a great help. Thank you!
The blog I need help with is: (visible only to logged in users)
-
Hi! I want to say logos and sticky menus are both built into Shoreditch if you select those options.
Head to Customize > Site Identity. You can upload a logo there. If you need to adjust the sizing after that, CSS may be needed, but you’ll want to see what’s there by default.
For the sticky menu, head to Theme Options. There’s a checkbox at the top to make the header stick to the top of the page.
Let us know if you need more help!
-
Oops, I just re-read your question after sending this, and realized I missed this part:
When we upload a logo through the site identity tab, it appears large and above the site title, making the menu look very awkward. Instead, we’d like it to appear small, to the left of the site title, and centered with the text, like the following: https://internetaddictsanonymous.org/wp-content/uploads/2023/02/Menu-header-example-1024×496.png
Can you add the logo again so we can see what you’re seeing? That link didn’t go through correctly.
-
Wonderful! Thanks for the note for the sticky menu—I enabled that and it’s working. That’s a big help.
Here’s an image of how I’d hope the site to look like:
Here’s how it looks when I try to upload a 50x50px logo png in the site identity:
While I’m here, I’ll also ask if there’s any way to add a CTA button into the menu? E.g., like the “try for free” button on https://www.headspace.com/.
-
Hi there!
Regarding the site logo:
You can use CSS that’s something like this, but you’ll need to adjust it, so it looks good with your logo. Adjust the second block of CSS for smaller screens if needed, too.
@media screen and (min-width: 896px) { .custom-logo { max-width: 80px; float: left; margin-right: .2em } .site-title { clear: unset; } } @media screen and (min-width: 768px) { .custom-logo { max-width: 70px; float: left; margin-right: .1em } .site-title { clear: unset; } }As for the CTA, one of the menu items can be targeted for custom CSS code, so it will have a different design replicated to make it look like a button. Can you tell us the following?
- Which menu item would you like to turn into a CTA?
- If you haven’t added a menu item that you’d like, please do so from the Customizer → Menus.
- What design would you like the CTA button to be? Do you want it to look the same as in https://www.headspace.com?
Thanks!
- Which menu item would you like to turn into a CTA?
-
Thanks so much aisajib. I tried adding in the custom css though and it didn’t have any effect:
Am I doing something wrong?
Re: the CTA, we’d probably turn the “Join a Meeting” menu item into “Meetings” (as it’s a drop down menu) and then make a separate “Join a Meeting” off to the far right. In terms of style, yes we’d want to have it very similar to the blue obround Headspace button.
-
Hi there,
I just checked your site and I’m not able to see the logo. You removed it since making this post? Sadly we’re not able to troubleshoot the issue if we’re not able to see what is not working currently, but I understand that you might not want to leave your site in disarray while waiting for a reply.
Since you have the Business Plan, I would recommend using the live chat support option here and we will be able to take a look at your site in realtime: https://wordpress.com/help/contact
This will allow you to set the logo briefly while our team takes a look and sorts things out. You are also welcome to set your logo again and we can take a closer look here.
Thanks!
-
-
Hi, I wanted to follow up with the code we came up with over live chat with the support representative, in case anyone else comes across this thread and is also looking for a solution. First of all, the code shared here didn’t work originally because we accidentally had an open bracket in our existing css code. However, even after closing that it still looked awkward. Here’s what we landed on:
/* Site branding: keep logo and tile on the same line — 26602318-hc (EZ) */
.site-branding {
display: flex;
align-items: center;
}/* Site branding: add margin between logo and tile — 26602318-hc (EZ) */
.site-title {
margin-left: 0.5em;
margin-top: 0;
}/* Site branding: change site title size on mobile and remove margins — 26602318-hc (EZ) */
@media screen and (max-width: 768px){
.wp-custom-logo .site-title {
font-size: 1rem;
margin-top: 0;
}
}/* Site branding: remove margins — 26602318-hc (EZ) */
@media screen and (min-width: 768px){
.wp-custom-logo .site-title {
margin-top: 0;
}
}/* Logo: Replace low-res image with a new one — 6017269-zen (EZ) */
.custom-logo {
visibility: hidden;
}.custom-logo-link {
background: url(‘https://internetaddictsanonymous.org/wp-content/uploads/2023/01/ITAA-logo-bg-512px.png’) center no-repeat;
background-size: contain;
display: block;
height: 50px;
width: 50px;
}
/* End — 6017269-zen (EZ) */
- The topic ‘Add logo and sticky menu to shoreditch theme’ is closed to new replies.
WordPress.com Forums 
