How do use header logo to fill in empty space in "Rowling" theme?
-
Hello, I have a logo that I really like but unfortunately, it is too small. I’d like to use the same logo, but so that it maximizes more of the empty space.
I am very new to CSS and WordPress so any simple instructions would be greatly appreciated. Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, since the software creates the logo image off of your original at the required size, what we will do is hide that image and add the image back into the link element for the logo as a background and then increase the width like this.
.site-logo-link { background-image: url('https://jaxfree.files.wordpress.com/2016/12/jax-free-logo-final.jpg'); display: block; background-size: contain; } .site-logo { visibility: hidden; width: 250px; }You can play with the width, but in consideration of visitors on phones, I would suggest not going 300px in width.
-
Ok, I used the code but it is replicating itself over and over across the header. I wanted to just take the original image and enlarge it as one image so that it fills up the empty space.
Thank you so much for all of your help!
Aaron
-
Whoops! Sorry about that. One CSS declaration missing from the first rule. Not sure how that didn’t get copied. Use the following instead.
.site-logo-link { background-image: url('https://jaxfree.files.wordpress.com/2016/12/jax-free-logo-final.jpg'); display: block; background-size: contain; background-repeat: no-repeat; } .site-logo { visibility: hidden; width: 250px; } -
Is there a way to enlarge the image where it also fills up the empty space to the right? Currently, the image is larger but only sits on the left-hand side. I would like for it to stretch across the entire header (from left to right).
Thanks so much for all of your help!
Aaron
-
You can give this a try, but on desktop monitors, it is monstrously large.
.site-logo-link img { width: 100% !important; height: auto !important; visibility: hidden; } .site-logo-link { background: url('https://jaxfree.files.wordpress.com/2016/12/jax-free-logo-final.jpg') no-repeat scroll top center /contain; display: block; } -
The width is good but you’re right, its way too big. Is there a way to keep the width but adjust the height so it’s not so massive?
Thanks again!
-
Is there a way to keep the width but adjust the height so it’s not so massive?
What would happen would be the image would become very distorted since we would be shrinking one dimension, but not the other.
If you want a full width image, you may consider restyling your logo image into a wider/less tall image.
-
I took your advice and the image is better, thanks for your help.
I still have some empty space on the right and was thinking about adding text or other images which would change frequently (eg. promos, giveaways, etc.)
Would this be possible? Thanks!
-
It’s looking great!
With the way the header section HTML is structured, I’m not seeing a way to cleanly add text to it. Generally we can use a pseudo selector and add some text, but no images or links or buttons, just straight text. You can add this to your custom CSS and see what you think. It will disappear from the header area at about 850px in width. Not entirely sure why it is doing that, but give a look and let me know your thoughts and if it will work for you, I can look into the particulars more closely.
-
Oops, forgot to give you the code. ;P
.top-nav:after { content: "This is a promo I'm going to put in the top right of my header area"; float: right; margin-right: 100px; width: 250px; padding: 10px; color: #fff; border: 1px solid #fff; margin-top: 40px } -
I love it!
Is there a way to make more use of the empty space? More specifically, can I space out words, say if I want to double space out the lines instead of having them single spaced?
You are the man!
-
Hey there almurdoch. Just wanted to chime in to answer this quickly for you!
Piggybacking off of what @thesacredpath has given, you can add a line of code under his using the line-height property. To increase the space, the code can look like this:
line-height: 300%;The new code will look like this:
.top-nav:after { content: "This is a promo I'm going to put in the top right of my header area"; float: right; margin-right: 100px; width: 250px; padding: 10px; color: #fff; border: 1px solid #fff; margin-top: 40px; line-height: 300%; }About 300% seems like it would be a good amount but you can change it to whatever you like! Hope this helps!
-
More specifically for your current layout, you can use this:
.top-nav::after { content: "Follow JAX-FREE to win cool FREE stuff!"; float: right; margin-right: 100px; width: 250px; padding: 10px; color: #fff; border: 1px solid #fff; margin-top: 40px; line-height: 300%; } -
Thanks for that!
Is there a way that I could add an additional text box centered between the logo on the left and the text box to the right?
Thanks!
-
Yeah, definitely! You can recreate the code below it but just change the margin-right.
.top-nav::after { content: "Follow JAX-FREE to win cool FREE stuff!"; float: right; margin-right: 400px; width: 250px; padding: 10px; color: #fff; border: 1px solid #fff; margin-top: 40px; line-height: 300%; }The 400 should be good. It might be over or under but by changing the number higher, it moves more to the left. By making it lower, it moves more to the right. Feel free to experiment with it, it’ll teach you a bit about CSS. :D
-
-
- The topic ‘How do use header logo to fill in empty space in "Rowling" theme?’ is closed to new replies.
WordPress.com Forums 