Changes to right sidebar header

Hey Reut,

There’s nothing exactly like that in the theme by default unfortunately, the closest thing would be this demo: https://kriesi.at/themes/enfold-photography/. You can set the layout under Enfold->General Layout->Layout.

Best regards,
Rikard

Hi,

Thanks for the update. Customisations like that would be out of scope of theme support, but if you should get stuck along the line then we might be able to help you out.

Best regards,
Rikard

Hi,

If you only want to change the width, then you can try CSS like this:

.html_header_sidebar #top #header {
  width: 400px;
}

Best regards,
Rikard

Hi,
This is quite tricky but perhaps this might get you started and you can adjust further to suit. Using a Menu And Logo Position of Logo left & menu right, & a sticky header with no topbar – If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add this code and save.

function create_a_sidebar_header_with_burger_menu() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
	 // Check if the HTML element has the "wp-toolbar" class
    if (document.documentElement.classList.contains('wp-toolbar')) {
        return; // Exit the script if "wp-toolbar" class is found
    }
    // Create the main toolbar div
    const toolbar = document.createElement('div');
    toolbar.id = 'right-toolbar';

    // Create the inner content divs
    for (let i = 1; i <= 3; i++) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'toolbar-content';
        contentDiv.id = 'content' + i;
        toolbar.appendChild(contentDiv);
    }

    // Append the toolbar to the body
    document.body.appendChild(toolbar);

    // Add the CSS styles
    const style = document.createElement('style');
    style.innerHTML = `
        #right-toolbar {
            position: fixed;
            right: 0;
            top: 0;
            width: 100px;
            height: 100%;
            background-color: #f8f8f8;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #content1 .main_menu {
        	position: relative;
        }
        .toolbar-content {
            width: 80px;
            height: 100px;
            background-color: #f8f8f8;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .toolbar-content:last-child {
            margin-bottom: 0;
        }

        .rotated-logo {
            transform: rotate(90deg);
            transform-origin: center;
        }
        #content2 .logo {
        float: none;
        position: relative;
    		left: unset;
    		height: unset;
        }
        #content3 .social_bookmarks {
            transform: rotate(90deg);
            transform-origin: center;
        }
        
        .html_header_top.html_header_sticky #main {
    		padding-top: 0;
				}
				#av_section_1 {
				    height: 100vh;
				}
				#menu-item-shop,#menu-item-search {
				display: none;
				}
				#top #content1 .av-small-burger-icon {
    		transform: scale(1);
				}
				.html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child {
				    padding-right: 0;
				    margin-right: 0;
				}
				.avia-menu.av_menu_icon_beside {
			    padding-right: 0;
			    margin-right: 0;
			    border-right-width: 0;
			    border-right-style: none;
				}
				.html_av-overlay-side-classic #top .av-burger-overlay li a {
    			border-bottom-style: none;
				}
				@media only screen and (min-width: 768px) {
				  .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main {
				      display: block!important;
				  }
				  #top #content1 .av-main-nav > li.menu-item  {
				    display: none!important;
				  }
				  #content1 .av-main-nav-wrap {
				      float: right;
				  }
				}
				#header {
					visibility: hidden;
				}
    `;
    document.head.appendChild(style);

    // Move the logo to #content2 and rotate it
    const logo = document.querySelector('.avia-standard-logo');
    if (logo) {
        const content2 = document.getElementById('content2');
        content2.appendChild(logo);
        logo.classList.add('rotated-logo');
    }

    // Move the menu to #content1
    const menu = document.querySelector('.main_menu');
    if (menu) {
        const content1 = document.getElementById('content1');
        content1.appendChild(menu);
    }

    // Move the social bookmarks to #content3
    const socialBookmarks = document.querySelector('.social_bookmarks');
    if (socialBookmarks) {
        const content3 = document.getElementById('content3');
        content3.appendChild(socialBookmarks);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This should give you a sidebar header with the burger menu, logo & social icons like this:

and the burger menu should open like this:

It probably needs some more css, but perhaps you can give it a try.

Best regards,
Mike

Hi,
To change this so it only works on screens larger than 768px I changed the code to this, which also adds some body margin so it won’t overlap the page content, and I make the menu items closer and I adjusted the social icons, please check.

function create_a_sidebar_header_with_burger_menu() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    // Check if the HTML element has the "wp-toolbar" class
    if (document.documentElement.classList.contains('wp-toolbar')) {
        return; // Exit the script if "wp-toolbar" class is found
    }

    // Check if the screen width is larger than 768px
    if (window.innerWidth <  768) {
        return; // Exit the script if the screen width is less than 768px
    }

    // Create the main toolbar div
    const toolbar = document.createElement('div');
    toolbar.id = 'right-toolbar';

    // Create the inner content divs
    for (let i = 1; i <= 3; i++) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'toolbar-content';
        contentDiv.id = 'content' + i;
        toolbar.appendChild(contentDiv);
    }

    // Append the toolbar to the body
    document.body.appendChild(toolbar);

    // Add the CSS styles
    const style = document.createElement('style');
    style.innerHTML = `
        #right-toolbar {
            position: fixed;
            right: 0;
            top: 0;
            width: 100px;
            height: 100%;
            background-color: #f8f8f8;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #content1 .main_menu {
        	position: relative;
        }
        .toolbar-content {
            width: 80px;
            height: 100px;
            background-color: #f8f8f8;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: start;
        }

        .toolbar-content:last-child {
            margin-bottom: 0;
        }

        .rotated-logo {
            transform: rotate(90deg);
            transform-origin: center;
        }
        #content2 .logo {
        float: none;
        position: relative;
    		left: unset;
    		height: unset;
        }
        #content3 .social_bookmarks {
            /*transform: rotate(90deg);*/
            transform-origin: center;
        }
        
        .html_header_top.html_header_sticky #main {
    		padding-top: 0;
				}
				#av_section_1 {
				    height: 100vh;
				}
				#menu-item-shop,#menu-item-search {
				display: none;
				}
				#top #content1 .av-small-burger-icon {
    		transform: scale(1);
				}
				.html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child {
				    padding-right: 0;
				    margin-right: 0;
				}
				.avia-menu.av_menu_icon_beside {
			    padding-right: 0;
			    margin-right: 0;
			    border-right-width: 0;
			    border-right-style: none;
				}
				.html_av-overlay-side-classic #top .av-burger-overlay li a {
    			border-bottom-style: none;
				}
				@media only screen and (min-width: 768px) {
				  .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main {
				      display: block!important;
				  }
				  #top #content1 .av-main-nav > li.menu-item  {
				    display: none!important;
				  }
					.html_av-overlay-side #top .av-burger-overlay li {
   					 margin: 0;
 				   height: 50px;
					}
				  #content1 .av-main-nav-wrap {
				      float: right;
				  }
				}
				#header {
					visibility: hidden;
				}
				body {
				margin-right: 100px
				}
				#content3 {
				height: 300px;	
				}
				#top .social_bookmarks li {
 				 display: inline-block;
 				 clear: both;
  				margin-bottom: 10px;
				}
    `;
    document.head.appendChild(style);

    // Move the logo to #content2 and rotate it
    const logo = document.querySelector('.avia-standard-logo');
    if (logo) {
        const content2 = document.getElementById('content2');
        content2.appendChild(logo);
        logo.classList.add('rotated-logo');
    }

    // Move the menu to #content1
    const menu = document.querySelector('.main_menu');
    if (menu) {
        const content1 = document.getElementById('content1');
        content1.appendChild(menu);
    }

    // Move the social bookmarks to #content3
    const socialBookmarks = document.querySelector('.social_bookmarks');
    if (socialBookmarks) {
        const content3 = document.getElementById('content3');
        content3.appendChild(socialBookmarks);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );

Best regards,
Mike

Hi,
Odd, it works for me, this is what it looks like:

Best regards,
Mike

Hi,

this is what I tried to do.

Best regards,
Mike

Hi,
To change the burger menu background to #201d1e and the lines white: Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-hamburger {
	line-height: 40px;
	background-color: #201d1e;
}
#top .av-burger-overlay li li .avia-bullet, #top .av-hamburger-inner,#top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: #fff !important; 
 }

this is the expected results:

to change the social icons color to – #304d03, try this css:

#right-toolbar .social_bookmarks a {
	color: #304d03;
}

this is the expected results:

when the menu is open there is no padding on the left, this is the width of the menu. For a smaller menu try this css and adjust to suit:

.html_av-overlay-side .av-burger-overlay-scroll {
    width: 200px;
}

this is the expected results:

Best regards,
Mike

Hi,
To show the search icon on the desktop menu try enabling Enfold Theme Options ▸ Main Menu ▸ General ▸ Append search icon to main menu
I can’t see your images as they require a login, to add a screenshot please try using an Screenshot service and pasting the image URL in your post.

Best regards,
Mike

Hi,
I added this css for the search icon to show:

#top #content1 .av-main-nav > li.menu-item#menu-item-search {
	display: block!important;
}
#top #content1 .av-main-nav > li.menu-item#menu-item-search a {
	color: #92B743;
	text-align: left;
}
#top #content1 .main_menu .menu li#menu-item-search {
	float:none;
}

Best regards,
Mike