How to change width of left sidebar with logo/menu

Hey JaneJoyce,

Adding a vertical logo like that requires special modifications and we are happy to help you with this customization.

You will need 2 versions of the logo one for desktop and one for mobile devices. For testing purpose you can use the initial T for mobile version of the logo.

STEPS:

1. Add the mobile logo from Enfold > Theme Option > Logo > Upload

2. Hide the mobile version logo in desktop and style the header widget to display the desktop logo.

/* Hide logo in desktop  */
@media only screen and (min-width: 767px) {
.html_header_sidebar .logo {
    display: none;    
}}

3. Setup a header widget area http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

4. Place your logo image inside a text widget in the header widget area.

<img src="http://www.thomascarterprojects.com/wp-content/uploads/2017/02/TCP-logo_01_42x500.jpg" alt="Logo">

5. Position the desktop logo in the widget area and the menu.

/* Hide Header widget in mobile */
@media only screen and (max-width: 767px) {
#header .widget {
	display: none;	
}}

/* Position logo in the header widget and menu */
#header .widget {
	position: absolute;
	left: 0;
	top: 0px;
}
.main_menu {
    margin-left: 50px;
}

By the end you should have something similar to the screenshot below :

Best regards,
Vinay

• This reply was modified 7 years, 10 months ago by Vinay.