Howdy Customizr designr!
Here’s a quick tip to simply add content before and after your text logo with CSS only.
We use the CSS pseudo classes ::before and ::after to do that.
Important: in this example double quotes are escaped with ‘\’ to use the code in the custom css section. You can remove these if you use this code in the style.css file of your child theme.
.site-title::before{
content:\"Custom Text\";
color:#000;
font-size: 20px;
}
.site-title::after{
content:\"Custom Text\";
color:#000;
font-size: 20px;
}
You can play with the css properties to add padding, margins, borders …etc
Hope this will be useful for you!
13 thoughts on “Adding content before and after the logo with CSS only”
Well yes because I have being trying to make it change position. I will delete that but any suggestion of how can it work? It didnt work originally.
thank you for this suggestion 🙂
Hi Nicolas,
I love your theme so far. I am having a little trouble however getting my logo to go beside the menu block as it is shown in the example. It keeps going above the block by itself in the top left. If you could please help me get in beside the block on the left I would greatly appreciate it.
Thanks in advance.
Brina
Hi Brian, please share your code and/or url of your website and I’ll try to help.
Thanks
I would like to see this information as well. Having the logo and the menu block on one line – the same way you do on the customizr site looks great. I am using grey.css and I see:
/* NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { /* position: absolute; top: 0; left: 0; */ z-index: 200; position: relative; margin-top: 0px; margin-bottom: 0px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */Is this what makes the logo higher than the menu items in the navbar?
I am having the same problem hoooow frustrating! logo is the required size but just floats at the top please advice
my website
http://budeartsandmusic.org/
Hi Konstantina,
You have been pasting some PHP code into the Custom CSS which is not good. You might want to delete this!
Bests,
Nicolas
Hello Nicolas, I have now removed the additional code could you please help with the logo position next to main menu?
Best regards
🙂
I would like to add an address and phone number under the logo.
when adding this code to the custom css area nothing changes. I am wondering if I am missing something or if there is a syntax error. Could changes to the core CSS have disabliled this feature?
class="lang:css"> /* Logo address and tele */ .site-title::after{ content: \"(505)-000-6239 \"; color:#000; font-size: 10px; }Thank you very much for you work on this theme.
Hi Roy, you ll need to “escape” your backslashes with another backslash. In other words , ad anoter backslash as follow : content : \\”(505)-000-6239 \\”.
That should to the trick.
Best
Hi Dave… How to include logo inside navbar, just like any default bootstrap templates has….
i want to ad an image instead of custom text? is this also possible?
Hi, you can define a background image property to the pseudo-class. See here : http://www.w3schools.com/css/css_background.asp
Thanks and hope this helps!
I would like to add a logo in this space as well as the social media and the menu options. So if you go to my site, where it says at&t authorized dealer, I would like to add the official logo in its place. Is this possible?