Title: Site Logo Alignment Last modified: July 23, 2018 --- # Site Logo Alignment * Resolved [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/) * Hi, * i wish to left align the site logo( the one in center of the page at the top). Please help on the same Viewing 15 replies - 1 through 15 (of 15 total) * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10081310) * Hi there, try this * ``` .site-logo { padding: 30px 0; text-align: left; } ``` * in your custom CSS box under Appearance ▸ Customize ▸ Additional CSS and let me know if this helps. * Thread Starter [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10081713) * Hey, * thanks this one is sorted. * Can we move the social media icons(including a search box too) opposite to the site logo on the right hand side. * TIA * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10083257) * Hi there, you can try this * ``` header .site-tools { width: 35%; position: absolute; top: 62px; right: 20px; } ``` * in your custom CSS box, but if you want a search box you will need to open header. php and add * ``` ``` * after * ```
``` * Use the default editor if you have the latest WordPress version and navigate to the /themes/olsen-light/ folder to find the file. If you decide to proceed with this modification I would suggest you create a child theme, copy over the files you are editing and make the modifications there. This will allow your changes to survive future theme updates. If you directly edit the theme’s files, all changes will be lost once you update. * Have a look at this guide to learn more about child themes and how to create one [http://www.cssigniter.com/ignite/beginners-guide-child-themes/](http://www.cssigniter.com/ignite/beginners-guide-child-themes/) - This reply was modified 8 years, 1 month ago by [Fotis](https://wordpress.org/support/users/markwaregr/). * Thread Starter [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10089197) * can we improvise on social media buttons. Probably a little design, increase size or color of individual logos. * Or like a real log colored pictured look alike?? * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10089418) * Hi there, Social sharing icons are rendered using the FontAwesome (fontawesome. com/icons) library. If you need to change them, for example size and color you can try this * ``` .entry-utils .socials li:nth-of-type(2) a{ background:red; border-radius:99%; width:30px; height:30px; text-align:center; color:#fff; font-size:20px; line-height:20px; } ``` * in your custom CSS box under Appearance ▸ Customize ▸ Additional CSS which will change for the second sharing icon the color, background color and size. Try multiple instances of this css rule replacing (2) with the order of the sharing icon you want. * Let me know if this helps - This reply was modified 8 years, 1 month ago by [Fotis](https://wordpress.org/support/users/markwaregr/). * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10094243) * Hi there, try this * ``` @media(max-width:767px) { .site-bar .site-tools { margin-top: 40px; text-align: left; } } ``` * in your custom CSS box under Appearance ▸ Customize ▸ Additional CSS. * Thread Starter [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10094542) * Hi, * the menu items displayed separately have been clubbed into a drop down. Earlier the items were displayed in the header seperately. * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10095790) * Hi there, have you enabled any plugins that might have caused this? * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10098729) * Hi there, 1. Can you add this * ``` .mm-navbar.mm-navbar-top.mm-navbar-top-1 { font-size: 12px; overflow: hidden; line-height: 1.1; } ``` * in your custom CSS box to fix your mobile menu header. 2. Do you mean these media icons [https://prnt.sc/iu90cn](https://prnt.sc/iu90cn)? 3. Try this * ``` @media(max-width:768px) { header .site-tools { position: relative; margin: 0; top: -10px; left: 0; right: 0; } .socials li a i { font-size: 12px } } ``` * in your custom CSS box under Appearance ▸ Customize ▸ Other 4. I am afraid this is not possible in Olsen Light. * Let me know if I can help out more * Thread Starter [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10098972) * i did add the tag. * if you could open the website in mobile version. In all category pages site logo and social media icons are overlapping. * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10099947) * Hi there, I noticed the custom css I provided applies only in the frontpage! Can you place all your custom css under Appearance->Customize->Additional CSS? * Thread Starter [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10101922) * Hey, * 2 concerns * 1. enclosed is additional CSS. The mobile view is still not optimized and i am facing the problem still. * 2. How can i make the theme responsive to screen resolution. I just opened it on a large screen monitor and the view was like half the screen. * Additional CSS: * /* You can add your own CSS here. * Click the help icon above to learn more. */ body, .entry-content p{ font-size: 16px; } * h3.widget-title{ font-size:20px; } h2.entry-title{ font-size:30px; } #footer. navigation > li { float: none; display: inline-block; } #footer .navigation { text-align: center } * .page-template .col-md-8.col-md-offset-2 { margin: 0; width: 100%; } * header .site-tools { width: 65%; position: absolute; top: 62px; right: 20px;} * .site-logo { padding: 30px 0; text-align: left; } * .aligncenter{ margin:0; } * .socials li a i{ font-size:22px; } * [@media](https://wordpress.org/support/users/media/)(min-width:991px) { header. site-bar .nav { width: 100%; } header .site-tools { position: absolute; right: 5px; width: auto; } header .navigation { text-align: center; } header .navigation li { display: inline-block; float: none; } } * .entry-utils .socials li:nth-of-type(2) a{ background:white; border-radius:99%; width:30px; height:30px; text-align:center; color:#0084b4; font-size:20px; line- height:20px; } * .entry-utils .socials li:nth-of-type(1) a{ background:#3B5998; border-radius: 99%; width:30px; height:30px; text-align:center; color:#fff; font-size:20px; line-height:20px; } * .entry-utils .socials li:nth-of-type(3) a{ background:#d34836; border-radius: 99%; width:30px; height:30px; text-align:center; color:#fff; font-size:20px; line-height:20px; } * .entry-utils .socials li:nth-of-type(4) a{ background: #c8232c; border-radius: 99%; width:30px; height:30px; text-align:center; color:#fff; font-size:20px; line-height:20px; } * [@media](https://wordpress.org/support/users/media/)(max-width:767px) { .site- bar .site-tools { margin-top: 40px; text-align: left; } } * .mm-navbar.mm-navbar-top.mm-navbar-top-1 { font-size: 12px; overflow: hidden; line-height: 1.1; } * [@media](https://wordpress.org/support/users/media/)(max-width:768px) { header. site-tools { position: relative; margin: 0; top: -10px; left: 0; right: 0; } . socials li a i { font-size: 12px } } * Thanks * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/#post-10102351) * Hi there, the custom css is correct, and should be working everywhere. Please clear your WordPress cache if you have any plugin(including any autocompimization plugin) to see changes everywhere. * This is the way it is meant to behave, in large screens. You can change that but it is not recommended. Have a look here [https://wordpress.org/support/topic/width-of-the-blog/](https://wordpress.org/support/topic/width-of-the-blog/) to achieve this. * Thread Starter [manuarora](https://wordpress.org/support/users/manuarora/) * (@manuarora) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/page/2/#post-10118268) * Thanks * [Fotis](https://wordpress.org/support/users/markwaregr/) * (@markwaregr) * [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/page/2/#post-10118494) * You are welcome! Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Site Logo Alignment’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/olsen-light/1.7.1/screenshot.png) * Olsen Light * [Support Threads](https://wordpress.org/support/theme/olsen-light/) * [Active Topics](https://wordpress.org/support/theme/olsen-light/active/) * [Unresolved Topics](https://wordpress.org/support/theme/olsen-light/unresolved/) * [Reviews](https://wordpress.org/support/theme/olsen-light/reviews/) * 15 replies * 2 participants * Last reply from: [Fotis](https://wordpress.org/support/users/markwaregr/) * Last activity: [8 years, 1 month ago](https://wordpress.org/support/topic/site-logo-alignment/page/2/#post-10118494) * Status: resolved