Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1126818

    Hi,
    I am looking for a solution to display a hamburger menu next to a normal text menu. But I cant seem to figure out how to get it working.

    The hamburger menu we are currently using looks and works great. But we want to display some of our most important pages as text in the menu next to the hamburger.
    Is there a way to get this to work? Maybe with the main menu displayed as hamburger and the secondary menu displayed as text on the left of it?

    Thank you for the help.

    #1127401

    Hey Maarten-dtm,

    A solution would be to use a pseudo selector and add the word with this, on the class.
    It is not the perfect, but using ::before might work for this:
    https://www.w3schools.com/cssref/sel_before.asp

    Best regards,
    Basilis

    #1127527

    I want multiple menu items in front of the hamburger menu. Each of wich is linked to the corresponding page. I don’t think that is possible using a pseudo selector.
    What I want is that the menu looks like the following:
    Services – Contact – Request quote – [Hamburger menu]

    Is that possible?
    Thanks.

    #1128336

    Hi,

    this requires a second position to the menu for you – consider to create one and add it to the header.php file.

    Best regards,
    Basilis

    #1175865

    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 months, 2 weeks ago by  killyman.
    • This reply was modified 4 months, 2 weeks ago by  killyman.
    • This reply was modified 4 months, 2 weeks ago by  killyman.
    #1176600

    Hi,

    Thank you for the inquiry.

    This is possible, but you have to modify the includes > helper-main-menu.php file and place another wp_nav_menu beside the existing one or in addition to the default menu. You can also use the existing hooks such as the ava_inside_main_menu or the ava_after_main_menu to insert additional navigation, widget or content in the main header container.

    Best regards,
    Ismael

    #1178853

    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!

    #1179337

    Hi,

    Thank you for the update.

    Either method is fine. If you chose to modify the file directly, look for this code around line 172:

           
    							$args = array(
    						            'theme_location'	=> $avia_theme_location,
    						            'menu_id' 			=> $avia_menu_class,
    						            'menu_class'		=> 'menu av-main-nav',
    						            'container_class'	=> $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
    						            'fallback_cb' 		=> 'avia_fallback_menu',
    						            'echo' 				=>	false, 
    						            'walker' 			=> new avia_responsive_mega_menu()
    						        );
    
    						        $wp_main_nav = wp_nav_menu($args);
    						        $main_nav .= $wp_main_nav;
    
    

    This block of code outputs the main menu. If you want to add another menu beside it, just create a new wp_nav_menu with different arguments.

    // https://developer.wordpress.org/reference/functions/wp_nav_menu/

    Best regards,
    Ismael

    #1179506

    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 months, 1 week ago by  killyman.
    #1180147

    Hi,

    Thank you for the update.

    Yes, using the secondary menu and adjusting its position should work just fine. Now, if you want to include the social icons in the mobile/burger menu, please follow these threads.

    // https://kriesi.at/support/topic/social-media-icons-in-mobile-menu-2/#post-1062418
    // https://kriesi.at/support/topic/social-icons-in-mobile-menu-3/#post-835215

    The script there should move the social icons inside the mobile menu container.

    Best regards,
    Ismael

    #1180416

    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 months ago by  killyman.
    • This reply was modified 4 months ago by  killyman.
    #1180867

    Hi,

    Thank you for the update.

    We adjusted the script in the functions.php file a bit.

    // add social icons inside the mobile menu
    function ava_custom_script_mod_social(){
    	?>
    	<script>
    	(function($){
    		var int = '';
    		function a() {
    			var isMobile	 = $('.av-burger-menu-main').css('display'),
    				htmlString   = $('.social_bookmarks:first').find('li a'),
    				mobileMenu   = $('.av-burger-overlay'),
    				socialString = [];
    	
    				if($('.av-burger-social-container').length) clearInterval(int);
    			
    				$('<li class="av-active-burger-items av-burger-social-container"><ul></ul></li>').appendTo('#av-burger-menu-ul');
    	
    				htmlString.each(function() {
    					var socialClass	= $(this).parent('li').attr('class'),
    					socialItems = $(this).wrap('<li class="'+ socialClass + ' av-active-burger-items av-burger-social"></li>').parent().unwrap();
    					socialString.push(socialItems);
    				});
    
    				$(socialString).each(function() {
    					$(this).appendTo('.av-burger-social-container ul');
    				});
    		}
    	
    		$('#header').on('mousedown', '.av-main-nav-wrap', function() {
    			int = setInterval(function() {
    				a();
    			}, 500);
    		});
    	
    	})(jQuery);
    	</script>
    	<?php
    	}
    	add_action('wp_footer', 'ava_custom_script_mod_social');
    

    And added this css code in the Quick CSS field.

    #top .social_bookmarks_dribbble a::before {
        content: '';
        font-family: 'entypo-fontello';
    }
    
    #top .social_bookmarks_twitter a::before {
        content: '';
        font-family: 'entypo-fontello';
    }
    
    html_av-overlay-full #top #av-burger-menu-ul .av-burger-social {
        width: 30px;
        right: 0 !important;
        left: auto;
        margin-left: 30px;
        text-align: right;
        display: inline-block;
    }
    
    #top  .av-burger-social-container ul li {
    	text-align: right;
    }
    

    Best regards,
    Ismael

    #1181174

    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

    #1181617

    Hi,

    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?

    This is the code that creates the social icon and after appends the created icons to the av-burger-social-container.

    htmlString.each(function() {
    					var socialClass	= $(this).parent('li').attr('class'),
    					socialItems = $(this).wrap('
     	<li class="'+ socialClass + ' av-active-burger-items av-burger-social"></li>
    ').parent().unwrap();
    					socialString.push(socialItems);
    				});
    
    				$(socialString).each(function() {
    					$(this).appendTo('.av-burger-social-container ul');
    				});
    

    You can remove all of it and instead create your own html and append it to the av-burger-social-container.

    Example:

    $('<li class="av-custom-social-icon dribbble">Dribbble</li>
     	<li class="av-custom-social-icon facebook">Facebook</li>
    ').appendTo('.av-burger-social-container ul');
    

    You will have to apply the icons manually and adjust the style. Unfortunately, it’s beyond the scope of, support so we won’t be able to help you with it.

    Best regards,
    Ismael

    #1182392

    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!

    #1182954

    Hi,

    Glad that you found a workaround.

    You can use this css code to horizontally align the social icons.

    #top #wrap_all #header #av-burger-menu-ul > .hamburger-nav-social a {
    	display: inline-block;
    	text-align: right;
    }

    Best regards,
    Ismael

    #1184752

    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

    #1184831

    Hi killyman,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    div .logo {
        z-index: 9999;
    }
    
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.