Modifying header in Crio WordPress theme

Tagged: Crio, Page Headers

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 26, 2023 at 8:04 am #77283

Anne Borgmeyer
Guest

Hi, I am struggling to get the header to do what I want. I cannot find a way to just modify the code or any real settings, just the blasted header menu. I am getting really frustrated because I have spent the whole day on this. My website is http://www.anneborgmeyer.com.
Here are the things I want to do:
When I turn the sticky header on on my website it jumps when I scroll down. How do I make that stop?
How do I set the logo to be responsively resized with the size of the screen? When in tablet or mobile view, the logo is too large and the menu hamburger is also too large. They are also weirdly offset in tablet and mobile views.
I want the logo to be smaller in general in order to limit the height of the header. I uploaded the recommended 400x100px logo, but it does not seem to have any responsive resizing.
Thank you for any help you can offer.

January 26, 2023 at 8:10 am #77347

Brandon C
Keymaster

Hi Anne,

Thanks for reaching out and thank you for using BoldGrid Post and Page Builder for WordPress!

I noticed you’re using Astra your WordPress theme. While Post and Page Builder controls many aspects of your pages and posts design, it has little to do with Global theme features such as your theme header.

If you were using Crio Pro WordPress theme to begin with we can definitely take a look at your concerns if you don’t mind switching back temporarily.

We look forward to hearing from you!

January 30, 2023 at 1:35 pm #77535

Anne Borgmeyer
Guest

I switched my theme trying to get something useable in that space. I switched back to Criio to try this again since it’s the recommended platform by the webhost service and I liked the page layout tool. If I can get the header to work, I would like the theme. If I can’t get the header to work, it is unusable.

I am still struggling to get it to resize my logo. I did figure out to install the WPCode plugin in order to upload an SVG image, so at least it’s not making it blurry any more.

How do I get the header to resize responsively and appropriately? I tried making two separate custom header templates for desktop/laptop and tablet/mobile, but can’t figure out how to tell it to switch between the templates. I just cannot understand why this is so difficult to accomplish!

January 30, 2023 at 1:49 pm #77713
Brandon C
Keymaster
Thanks Anne,

One thing to keep in mind here is that Crio & WordPress recommends a logo image dimensions of 400 by 100 pixels. The ideal approach is to proportion your image before uploading to the site. This will give you the best results.

What you could also do is use custom CSS to resize the image from the CSS/JS Editor. For instance something like this would change the size of the image on your homepage:
```
.boldgrid-section img:not(.aligncenter) {
    display: inline;
    width: 60px;
} 
```
In order to to give pages and post specific header templates you need to edit the page or post and scroll down to the Page Header section. Select the Use Post Setting option and choose the header you would like to be displayed on that page or post.

I hope this helps! Please link us to any page or post where your custom headers are present if you would like for us to review your code and give our best suggestions on how to modify.
Author

Posts