How do I add my logo on the top left in Pro?

[designerwriter]

After almost finishing my website, I just realized that I forgot to put the logo in the top left! I don’t know how to do it. I looked through some similar topics but not much from the 2021 updated theme so I don’t know if anything has changed. I want it flush left with the white page background.

See the screenshot.

It’s ok I figured it out. Although I have 3 questions. The logo in the break point view is bouncing the logo up a line to above the menu. This is not how I want it. I searched everywhere to make the space in between the menu words less but I could not find the information. I went into the header and there was nowhere that I could reduce the space in between the words. I did reduce the space in between the letters however but it didn’t make much of a difference.

I want to make the logo bigger. See the attached 2 versions. One is 400px wide and the other one is 450 and it still bounces up with the base break point. Would it be easier if I just made the logo bigger so that it is sitting above the menu? Doesn’t it look weird? There’s a big space to the right of it.

Thirdly, I enabled the search button but it added an extra image to the menu and so there is even less space. I had no choice but to make the logo smaller. When I went to check if the search image worked, it did, but the font is so huge that is typed underneath the search sentence. Is there anyway that I can make the font smaller? See the attached images.

[ruenel]

Hello Grace,

Thanks for writing in!

Since you want to have better control of the Logo image in your header, it is highly recommended that you go to Cornerstone > Header Builder and create your own custom header. If you are not familiar with the header builder yet, please check this out:

• https://theme.co/docs/header-builder-overview

You can even watch these video tutorials too:

There are several various elements that you can use to create your custom header.

• https://theme.co/docs/elements-overview

Hope this helps.

[designerwriter]

Thanks ruenel. I believe I used the Pro header before. It’s not a great time to do the menu when I am sending out résumés. How long would it take? I could do it late at night when no one is searching for my website.

Is this a simpler solution? Does it have a space option between the words? Right now, this current menu is not working. This new header design option, was it added to the latest update or the one before? I noticed that I can no longer edit in Pro. Is there a big difference or was Pro just named that to distinguish it from X which also uses Cornerstone?

Thanks for the link. I watched the video. Its very short. Can you please send me some other documentation on it as well? I need step by step instruction just in case. Also, if you have another longer video link can you send it?

I have a question about the Header builder. Can I create the header separately then assign it to a page so that my current menu is still on there until I finish the new one? That would be helpful. I will just keep it “unassigned” until I am ready to put it on the Home page. I don’t have to create 2 columns with the new menu do I …one for the logo, the other for the menu?

G

[designerwriter]

How do I change the size of the font in Search? Not sure why they made it so huge.

[tristup]

Hi Grace,

The default font size is 9.4em, to reduce the size you need to add the following custom CSS code into the Theme Options > CSS.

.x-searchform-overlay .form-search .search-query
{
    font-size:13px!important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[designerwriter]

So I change 13px to 9.4em? Thanks for adding that code. Much appreciated. Do you have any suggestions where I can take some courses on coding?

Now I have a question. When I build the header, can I build it apart from the website and then place it in when I am finished? I downloaded the template with the headings on the right and the logo image on the left. Will this work or do you suggest I build my own header?

Is it better to place the header on the page when I am finished…is this possible or do you suggest that I just work on the Home page when I build a header? If I can build a header separately, then how to I place it on the Home page? Do I have to assign the header to a page…is this how I do it?

[designerwriter]

I fixed the font and turned it back to px instead of making it 9.4em. I made it 14px and it’s the size I want. However, a bigger issue is that the search function is not working! See my credentials to find out what’s going on.

After it didn’t work, I removed the code, saved it, then typed in GRAPHIC DESIGN again and hit return and got nothing. Then I put the code back, saved it, hit return, and it still gave me the same result…nothing. So it definitely isn’t the code.

[tristup]

Hi Grace,

I have checked and found that the Search functionality is working fine on your website. I would suggest you check and get back to us if you are still facing the issue. I would suggest you provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[designerwriter]

Thanks I will do that tomorrow about the search button. I will try other browsers too. But you didn’t answer the question about the header.

[designerwriter]

1. Ok I checked and the search is now working. I guess I had too many apps opened yesterday. I only have 6RAM so I need a new computer. That’s coming.

However, in the search area I want to change the size of the fonts. I did an inspection but I am not sure what I should change. I want to change Search Results, the tagline underneath it, the bold copy underneath the tagline, and the heading and Read More sizes. See the 2 attached images.

2. Can you please answer the questions about the header?

3. Can you send me some documentation on how to set up a header. That video was too short. (Nevermind, I found the documentation.)

That will be it!

P.S, I went into Style Editor on Firefox and it gave me this image. Now, the first big title on Search seems like it is 36pt. See attached.

designerwriter

[tristup]

Hi Grace,

It’s great that Search is working now and you are able to find the documentation too. And to reduce the font size of the Search Result, you need to add the following custom CSS code into the Theme Options > CSS.

.search-results h1.h-landmark
{
    font-size:200% !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[designerwriter]

This did not work. I pasted the code in the CSS for the Search Results heading and the line below it. I cleared the cache as well. See the 2 attached files. Plus, the Search Results window doesn’t open in Firefox or Chrome but it opened in Brave.

Also, regarding the header, you didn’t answer my question that if I already have a header, can I create one separately so that people can access the site then attribute it to the Home page or do I have to remove the header completely and do it live?

[tristup]

Hi Grace,

I went ahead and added the given custom CSS code into the Theme Options > CSS and it worked. Sorry If I have missed out on the question related to the Header, as you are using the Pro where you can use the Header Builder to create multiple Headers and can assign it to the page you want. I would suggest you go through the following articles on the same.

Header Builder Overview | Themeco Docs

How to Set up Navigation | Themeco Docs

Conditions and Assignments | Themeco Docs

Hope it helps.
Thanks

[designerwriter]

How come it worked for you? What was wrong with the code that I placed?

One last question. Do I get rid of the current menu or will it save on top of this one when I attribute the header to the page?

Is it easier for me to just get rid of the search icon and forget about doing the new header? Then I can make the logo bigger.

Also, if I choose to create a new header, will the logo still pop up like it’s doing now when I use different break points or because I am customizing the header will it stay put in line with the copy? Thanks for your help tristup.

[ruenel]

Hello Grace,

There could be a typo in the code or you have placed it in the wrong spot. We will ask @Tristup for that.

When you create a custom header in Cornerstone > Header Builder, the current header will be replaced. That means that the current menu and the logo that you have right now will be replaced. With the Header Builder, what you can do is replicate the current header and add your preferred styles or design. This way you’ll have more control over the elements on your header compared to just using the default header which is limited and has no other controls.

Hope this explains it briefly.

[designerwriter]

Thanks ruenel. I will try it and if something goes wrong, I will set up another topic. I am so glad that I don’t have to delete it while I am working on the new one. Brilliant! I am so happy that Pro has changed. In the beginning when I used the theme, it was much harder to use and not straightforward. It gets better I imagine with every issue people have on this forum. What better way to make positive change than to use everyone’s feedback!

[prakash_s]

Hello Grace,

Thanks for your precious feedback.

Thanks

[designerwriter]

You’re welcome prakash_s. It’s important to give feedback because it helps to improve the program.

[marc_a]

Hi Grace,

Great! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.