Site Logo Alignment

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.

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

<?php get_search_form(); ?>

after

<div class="site-tools">

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/

• This reply was modified 8 years, 1 month ago by Fotis.

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.

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?
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

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?

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/ to achieve this.

You are welcome!