How to add logo to top right hand corner
-
I’m using the Lodestar theme: https://wordpress.com/theme/lodestar/rexultsmedspa.wordpress.com
But I don’t know how to add my logo to the top right hand corner of the website..
Do help, thanks!The blog I need help with is: (visible only to logged in users)
-
Hello @rexults,
Not sure if you were able to figure this out or not since your site is currently set to ‘Private’.
Normally the logo/identity for this theme is centered on top of the main image of the site, but it seems there’s a work around. You can add some HTML for your logo on the top right by going to the Customizer > Theme Options > Header Top Text
You’ll want to insert the HTML for your logo image in the input box for Header Top Text 2.
You can see more information on the Lodestar theme info page located here: https://wordpress.com/theme/lodestar
Scroll down until you see the section for “Header Top Text”.
If you need more help, feel free to reply back. We may need to see your site in order to help troubleshoot, so you can either set the site to Public or feel free to invite me as a viewer on your private site and I’d be happy to take a look.
-
Hi Charley, thank you loads for your help! Apologies that you couldn’t view the site, I made it private as it was not yet completed.
I have invited you as a viewer: https://rexultsmedspa.wordpress.com
I was able to add the logo to the Header Top Text as per your instructions.May I also know if there is a way to shift the menu all the way to the left instead of the centre, and the logo all the way to the right? I would also like to know if there is a way to split the homepage into two columns.
Thanks for your expertise!
-
Hello @rexults,
Thanks for the invite – I can confirm I’m able to see the site now. :)
Yes, it’s possible to move the menu to the far left and the logo to the far right. You can fix this with some custom CSS. To add CSS using the editor, go to your Customizer and click on the CSS tab.
Copy and paste the following code at the bottom of the editor:
/* Fixes navigation & logo area width */ .wrap { max-width: calc(100% - 1em); } /* Vertically aligns menu links */ @media screen and (min-width: 60em) { .site-top-content, .main-navigation { vertical-align: middle; } }Also, if you don’t see the CSS editor, you’ll likely need to upgrade your plan in order to access the CSS of your site.
To answer your question about splitting the homepage into two columns, I assume you’re referring to the 2-column setup as shown in the About Our Company section of the Lodestar demo?
If so, yes — you can add what the theme calls ‘panels’ and then adjust each panel into 1 or 2 columns. Here are the instructions I found on the Lodestar info page (In the Setting Up your Front Page section under the Adding Panels image – roughly halfway down the page):
To add additional panels to your Front page, follow these steps:
1. Create or edit a page.
2. To add a large image to the top of the panel, assign a Featured Image to the page. This image should be at least 2000 pixels wide and 1200 pixels tall.
3. Publish your page.
4. Navigate to Customize → Theme Options. From the drop-down, select the page you’d like to appear in the panel.
5. For each panel, you also have the option to display the page’s content in one or two columns.I hope this helps! Let me know how it goes :)
-
Hi Charley, thanks for the code! Will bookmark that once we get approval to upgrade our plan.
For splitting the homepage into two columns, I was referring to Lodestar’s front page panel, above panel 1. There doesn’t seem to be an option to split the text on the front page into 2 columns unlike the panels. Is there a code to do so as well?
Thanks again!
-
You’re welcome! :)
It looks like the default layout for the Front Page panel is single column. But, there’s a workaround.
If you’re using the new editor (Gutenberg), you have the option to use and add Column blocks which could give you the multiple columns you’re looking for in that area.
Just put your cursor in the editor where you want to add a column block. You’ll find the Column block under the Layout Elements section. I was able to successfully add 2 column blocks on my test site using this method. Let me know if you run into any issues and I can help troubleshoot if needed.
Here’s some documentation that goes over the block system in the new editor (if you’re not familiar already): https://en.support.wordpress.com/wordpress-editor/
I hope this helps! :)
-
Hi charleybea, Merry Christmas and Happy New Year! Apologies for the delayed response as I was away during the holidays.
Is there a way to add columns if you’re not using Gutenberg? I wasn’t aware that Gutenberg exists and I researched on how to install it but wasn’t able to understand the instructions as it was too technical for me. For now, I’m still using the standard wordpress editor..
-
Hello @rexults,
Merry Christmas and Happy New Year to you as well! I hope you had a nice holiday. :)
There is a way to add columns manually to the classic editor (what you’re likely using now). It’s a little more technical to use and more room for error, but not impossible. I’ll give you some instructions to do it manually as well as show you how to change your editor to Gutenberg if you decide you’d rather do it that way.
When you go to the editor to add the content, you’ll want to change from the Visual tab to the HTML tab to add some custom HTML to get the 2-column structure you’re wanting. See screenshot of what I mean here: https://www.awesomescreenshot.com/image/3811132/9aa4c5f37a516e722ea13c7072e2cdba
And since you’re not able to add custom CSS yet (need upgraded plan to do this), I’ll put the custom CSS inline with the HTML code to get it to work while you’re building out the site.
Try adding the following code to the HTML area of your editor:
Column 1 content goes here. Column 2 content goes here. </div>Just replace the text that says “Column 1 content goes here.” and “Column 2 content goes here.” It’s important that you only replace the text and not the start and ending > and < of the HTML code. See this screenshot for more clarity: https://www.awesomescreenshot.com/image/3811135/8eee99a2c0d6734e28f54405fe97cb65
Alternatively, you can switch to the Gutenberg editor by going to a page or post with the editor in view and on the far right of the screen, you’ll see the option to try the new Gutenberg editor like in this screenshot: https://www.awesomescreenshot.com/image/3811139/91aab3f19860988b1526149d68a4d8da
If you click the button that says “Learn More” you’ll see a pop up that gives you the option to try the new editor. Then you can follow the Dec 21st instructions to get the two column layout. You can always revert back to the classic editor if you change your mind.
I hope this info helps. I know it’s a lot to take in, so if you have questions, please let me know. I’m happy to help! :)
-
Hmm, I’m not sure what happened to all of the code. Please paste this HTML code into your editor:
Column 1 content goes here.Column 2 content goes here. -
I’m sorry about the multiple posts. I’m not sure why the code is getting stripped when I try to paste it here.
Instead, I went ahead and posted the code on one of my test sites here:
https://myplayground412.wordpress.com/rexults/I sent you an invitation to view the site since it’s private. Once you accept, just copy the HTML code from the post on that page and paste it into your HTML editor tab.
Again, let me know if you have questions. :)
-
Hi charleabea,
Thank you for all your help! I will be using your instructions for another account instead and will be closing this one as the project has unfortunately been discontinued. My other account is @heizeline, I sent a request to view the test site you have provided.
Thanks again for taking the time to provide such detailed instructions! :)
-
Hello @rexults,
Of course! You’re very welcome :)
I’ve approved your other account @heizeline to view the HTML page.
Keep in mind that I use this site to test various things and while I try to keep pages intact, there may be a possibility that it isn’t there in the future.
Please copy the HTML when you get a chance. I’d hate for me to forget and remove it before you can use it!
- The topic ‘How to add logo to top right hand corner’ is closed to new replies.
WordPress.com Forums 