Centered menu with Social Media Icons

The reason for this #masthead .site-bar .nav has 100% width set and width of .site-tools is set to 35%.

In order to bring them in one line I would suggest you to decrease the widths of both panels like:

#masthead .site-bar .nav {
   width: 70%
   float: left;
}

and

.site-tools {
    float: right;
    width: 20%;
}

However, the above code will shift your menu towards left and will now stay centered. But to keep both elements (menu and social icons) in one line you need to decrease the widths of each section.

Please let me know if that works!

Thanks. As you said it shifts the menu to the left. Tried to play with the numbers but it either shifts to the left or the social icons go on the second line.

Hi there,
you can try adding this

@media(min-width:768px) {
    .site-tools {
        width: 35%;
        position: absolute;
        right: 15px;
    }
}

in your custom CSS box under Appearance | Customize |?Additional CSS

Great. Works perfect.
Thank You

Hey, can someone please help me with the same theme.

Here is the Olsen Light Theme Demo: https://www.cssigniter.com/demo2/?theme=olsenlight

Here is our Olsen Light Theme: https://brittanytrautman.com/

Can someone tell me where i went wrong and how to get it to look like the demo version?

I uploaded the sample content and widgets exactly how the instructions told me to but the site doesn’t look the same. Can someone help me get it right?

@mauryahu – Please start a new topic with your question here:
https://www.ads-software.com/support/theme/olsen-light#new-post