Hamburger menu next to default menu in enfold

Has anyone figured out how to accomplish this? I would also like to be able to have a secondary menu appear as a hamburger menu to the right of the primary menu. The advantage of this configuration is that one can keep the items on the primary menu to a minimum and then add additional items and social media icons to the secondary Hamburger menu.

The following website has this feature set up: https://www.troika.tv/

Screenshot of Normal Menu with Hamburger Menu to the right in collapsed mode here: https://ibb.co/hWTtB4H

Screenshot of Hamburger Menu in expanded mode to the right of Normal Menu here: https://ibb.co/sC299jP

• This reply was modified 4 years, 10 months ago by killyman.

Hi Ismael. Thanks for the suggestions.

So, what is the best method to accomplish the following configuration?

• Default menu is set to Hamburger menu mode and remains visible at any screen width.
• Secondary horizontal menu located to the left of the default menu is only visible at screen widths of 768px and above.

Here is a link to a mock up screenshot of what I’m describing: https://ibb.co/1G6vRfZ

Thanks!

Thanks for the reply Ismael.

I ended up making the default menu display as a (hamburger) icon in the Main Menu general settings. Then I created a secondary menu and used CSS based on this topic (https://kriesi.at/support/topic/secondary-menu-location/) to re position the secondary menu to the left of the default menu icon and to disappear at screen widths of 767px and lower. All seems well for now.

Do you think this CSS based solution is sufficient? I put a link to the dev site for you in the private content section so you check and let me know if the coding and functionality seem correct.

Also, we’d like to add some social media icons to the default hamburger menu overlay screen just below the last vertically stacked menu item as well as our png logo image in the top left corner of the overlay screen. See this screenshot for reference purposes: https://ibb.co/hMHDvfD

Lastly, any chance you can provide some input on the following masonry image size topic I started? Thanks.

• This reply was modified 4 years, 9 months ago by killyman.

Thanks Ismael. I looked at the links you provided to include the social icons in the mobile/burger menu. I added the code into our child theme’s functions.php file, but it doesn’t seem to do anything. I think it is because of the way I have the default menu set to “Display as icon” and I have modified the secondary menu via CSS to bring it down to the left of the default menu (icon). In the child theme style.css file I had to add the CSS further below for the secondary menu positioning to work (header_meta margin top -31px) and to hide the secondary menu altogether when the screen size becomes 767px and narrower.

FYI, in Header settings, Header Social Icons is set to “No social icons.” I’ve tried changing to show icons in all 3 choices and it doesn’t have any effect.

I’m including the URL to the dev site in the private content section along with temp WordPress admin access credentials.

Here is a screenshot mock up of what we hope to accomplish: https://ibb.co/93gwJQ1

/* ----- BEGIN SECONDARY (SUB MENU) MENU CSS ----- */

#header_meta {
    margin-top: -31px;
}

@media only screen and (max-width: 767px) {
	#header_meta {
	display: none;
}
}

nav.sub_menu {
    position: relative;
    top: 60px;
    left: -44px;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 172px;
}

.sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
	font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    padding: 7px 0;
	font-family: 'metropolisblack', Helvetica, Arial, sans-serif !important;
}

.sub_menu li {
    float: left;
    position: relative;
    padding: 0 6px;
    border-right-style: solid;
    border-right-width: 1px;
    line-height: 10px;
}

/* removes dividers between menu items */
.sub_menu li {
    float: left;
    position: relative;
    padding: 0 6px;
    border-right-style: solid;
    border-right-width: 0px; /* 1px */
    line-height: 10px;
}

/* ----- END SECONDARY (SUB MENU) MENU CSS ----- */

• This reply was modified 4 years, 9 months ago by killyman.

Thanks so much Ismael for all your help with this.

We think it might be best to just skip using the built-in social icons feature/script and instead insert our own HTML code right after the last mobile menu navigation item? Could you provide us with the necessary code to add to our functions.php file (and if necessary separate CSS code) to achieve this? I added our HTML code and CSS to the private content section for reference.

Also, how can we add our png logo to the top left corner of the mobile menu overlay screen?

Lastly, is there a way to remove the scroll bar on the right side of the mobile menu overlay?

See screenshot mock-up for reference purposes: https://ibb.co/dD5MC9d

Thanks Ismael. Tried the latest code you provided, but couldn’t achieve what I wanted with custom png images.

I tried another method I found on the support forums. This method involved creating a custom links menu item and then adding in my HTML code in the Navigation Label field. See screenshot here: https://ibb.co/hcY4pk9

That seemed to have worked well as you can see by this screenshot: https://ibb.co/2Mnh78S

But, now I’m struggling via CSS to get the png social icons to align horizontally insted of vertically, while keeping the navigation menu items above remain vertically stacked. Any suggestions? Refer to previous screenshot again: https://ibb.co/2Mnh78S

Thanks!

Thanks Ismael. That CSS code worked perfectly.

Lastly, how do I get our logo (png format) in the upper left corner of the hamburger menu overlay screen?

Screenshot reference: https://ibb.co/93gwJQ1