Tagged: 

Viewing 30 posts - 1 through 30 (of 35 total)
  • Author
    Posts
  • #1461974

    I started yet another (my 5th) Enfold web project (happy customer, mainly due to the awesome support that always helps me to tweak the theme). Each time I try to achieve an individual identity for the website and this time I’d like to tweak the main menu.

    Basically what I’m trying to achieve is to wrap a ‘transparant box’ around the menu with an adjustable background and font colour. The logo needs to be on the left (with another background colour of that socket) and on the right a CTA (make appointment) with another background colour in that socket (which I guess will be a custom link in the menu using the coloured button option, though the button needs to have the same hight as the rest) . This applies for devices starting from a screen size of tablets. The menu is on top of the content of the page (i.e. a full width slider or image)

    See https://drive.google.com/file/d/1twinJeP4c580lVkn9jbqnAKerd4e_bvd/view?usp=sharing for an example and find the url of a live example of another site in the private content.

    looking forward to realize another awesome enfold site!

    #1461997

    Hey Peter,
    I will try, in my example I wanted to use a menu created in WordPress, so first create a menu and save the menu name for the function code later:
    Enfold Support 6307
    For the logo we will add the image via css so you will need to add the custom classes button logo
    Enfold Support 6313
    For the CTA we add the classes button cta:
    Enfold Support 6311
    Then on the page you want to use this use the option Hide Header on this page:
    Enfold Support 6315
    and add the shortcode [custom_menu menu=”test menu with logo”] to your page, adjust the menu name to suit.
    Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function display_custom_menu($atts) {
        $atts = shortcode_atts(
            array(
                'menu' => '',
            ), 
            $atts, 
            'custom_menu'
        );
        $menu = $atts['menu'];
        if (!empty($menu)) {
            $args = array(
                'menu' => $menu,
                'container' => false, 
                'menu_class' => 'av-main-nav scmenu',
                'echo' => false
            );
            $menu_html = wp_nav_menu($args);
            $output = '<header id="header" style="position: absolute; top: 0;">';
            $output .= '<nav class="main_menu" style="display: flex; align-items: center; justify-content: center; width: 100%;">';
            $output .= $menu_html;
            $output .= '</nav>';
            $output .= '</header>';
            return $output;
        } else {
            return '<p>No menu specified or menu not found.</p>';
        }
    }
    add_shortcode('custom_menu', 'display_custom_menu');
    

    and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #wrap_all .main_menu ul.scmenu {
    list-style: none;	
    }
    #top #wrap_all .main_menu .scmenu .menu-item a {
    	color: var(--enfold-header_replacement_menu_color);
    }
    #top #wrap_all .main_menu .scmenu {
    background-color: rgba(0, 0, 0, 0.2);
    }
    body:not(.wp-admin) li.button.logo {
    background-image: url(/wp-content/uploads/2024/07/logo_fysiotherapie_groningen.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 200px;
    margin-left: 0;
    }
    body:not(.wp-admin) li.button.logo a {
    opacity: 0;
    }
    #top #wrap_all .main_menu .scmenu .button.menu-item.cta {
    	background-color: orange;
    }

    and adjust the image URL to suit
    The expected results should be like this when a color section with a image is used:
    Enfold Support 6317

    Best regards,
    Mike

    #1462489

    Hi Mike, thanks for your quick and detailed response.
    I’ve followed all your steps, but I have two problems:

    1. I don’t see the possibility to add css to menu elements.
    no css in menu

    2. where to add the shortcode? As a codeblock/shortcode on top of the page in the editor? builder or on the bottom of the page builder? bottom

    #1462502

    Hi,
    To add the classes to the menu items, first enable them in the drop down at the top of your menu screen “Screen Options” and checking the CSS Classes box, which will show the classes to the menu items.
    Enfold Support 6340
    I added the shortcode in a code block element, in a color section so the page would have a full image background, but you could add the code block element to the top of your page.
    Enfold Support 6342
    Enfold Support 6317

    Best regards,
    Mike

    #1462510

    Thanks for explaining.
    we’re getting close.
    I still have the following struggles

    – I wanted to change the menu text to white, it was grey. I took the code `color: var(–enfold-header_replacement_menu_color);’ out and it’s white. is that a problem?
    – i see see the word ‘logo’ in the logo area, how do i get rid of that?
    – there is no animation (change in colour and underlining) in example of menu links. How to add that?
    – I’d like to increase the width a bit of the menu and decrease the hight. How do i play with that?
    – when i decrease the size the menu gets rather messy. when i make it even smaller no menu shows. How do I activate the hamburger menu from a certain size? perhaps to solve both issues small screen menu issue

    #1462545

    Hi,
    You can replace color: var(–enfold-header_replacement_menu_color); with a color, no problem.
    The word “logo” should be hidden by the css, I would have to see the page.
    There is no animation built in to it, your example menu has no animation.
    Your example menu changes to a different style at smaller screens, I only looked at the desktop version.

    Best regards,
    Mike

    #1462601

    Hi Mike, the website is currently on my desktop only (on the app Local). i’ll share a link when its nearly finished.

    animation in menu: the menu i shared has a small hoover over effect on the text. How do I achieve for example a colour change and underlining in white for the url that is active?

    Size of menu: the example menu has the same width as the content under it, till it gets too small and changes to a hamburger menu. How do I achieve this? I think Enfold could really use some more menu options, such as the one i’m exploring now, as i’ve build several enfold sites and I’m really looking to achieve something a bit different than all the other enfold sites (i and others) have build, but still remain loyal to the enfold theme/team.

    #1462686

    Hi,
    Well, I don’t think that my solution above will work for you. I guess you will need to use the standard menu and try to customize it with css to look the way you want for desktop and then use the standard burger menu for mobile devices. So far I have not been successful at this, but I will keep trying.

    Best regards,
    Mike

    #1463149

    Hi,
    Thank you for your patience, as I review your request, I believe the only issue right now is switching to the built-in mobile menu before the custom menu becomes too large for the screen, so originally I have said to use the option <strong style=’color:#000′>Hide Header on this page but this also hides the mobile menu, so lets change this to <strong style=’color:#000′>Transparent Header
    Enfold Support 6413
    and hide the header with css:

    @media only screen and (min-width: 990px) { 
    	#header_main {
    		display: none;
    	}
    }
    @media only screen and (max-width: 989px) { 
    	.avia_codeblock > #header {
    		display: none;
    	}
    	#menu-item-shop, .responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
    		display: none;
    	}
    	#av-burger-menu-ul .button.logo {
    		display: none;
    	}
    	.logo a {
    		 display: flex;
        align-items: center;
    	}
    	#header_main {
    		background-color: #000;
    	}
    }
    @media only screen and (max-width: 989px) { 
      .responsive #top #main {margin-top: -90px!important;}
      #top #wrap_all .av_header_transparency {background-color: transparent!important;}
      div#header_main > .container {display: block !important;}
      #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; 
      }
      .html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
      background-color: #000 !important; 
      }
      }

    and for my example menu it breaks around 914px so setting the mobile menu to show at 990px in the theme setting will solve this, and I set the <strong style=’color:#000′>Alternate Menu For Mobile to the same menu we used for the shortcode:
    Enfold Support 6415
    So now at 990px and above it looks like this:
    Enfold Support 6417
    and below 989px the mobile menu shows like this:
    Enfold Support 6419
    and when the menu is open:
    Enfold Support 6421
    I believe this is what you are trying to achieve, I linked to my example page below for you to check.

    Best regards,
    Mike

    #1464391

    Hi Mike, thanks a lot for looking into this! indeed. this is getting really close to the desired result.

    1. The menu on larger sized screens is not yet wide enough. Ideally the menu is as wide as the content blocks, see menu size how do I achieve this?

    2. on mobile: how do I position the CTA button to align left?
    menu cta

    3. I don’t see the logo on mobile, but I will ask for help again once the site is better accessible

    4. also, is there a way to make it sticky? such as is the example on the given example site?

    #1464636

    Hi,
    You can change the width of the burger menu at Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width
    Screen Shot 2024 08 14 at 4.36.41 PM
    To align the button text to the left, try this css:

    #av-burger-menu-ul .button.cta.av-menu-button,
    #av-burger-menu-ul .button.cta.av-menu-button .avia-menu-text {
    	padding-left: 0;
    	padding-right: 0;
    }

    Best regards,
    Mike

    #1464668

    Hi Mike! I’m a bit lost. You’re talking about a hamburger menu? But i’m talking about the menu for which you gave me the code to build/implement? I doubt changing the width as you suggest will get the required result, that being that it matches the exact width of enfolds building /content blocks below? I’m not sure how i can explain better what i’m talking about that the pic i shared? (No custom width, just the automated width that enfold uses for all content blocks in the site itself? Now the width of the menu you gave me code for depends on the content (amount of links) of the menu, but i require it to work different.

    #1464726

    Hi,
    The width of the burger menu is set at Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width
    The default is 500px:
    Screen Shot 2024 08 14 at 4.36.41 PM
    which is like this at 768px:
    Screen Shot 2024 08 15 at 5.04.41 PM
    so you can change it to something else like a percentage, I test 90%:
    Screen Shot 2024 08 15 at 5.07.00 PM
    try to adjust to suit with a percentage that matches your content width percentage.

    Best regards,
    Mike

    #1464759

    Morning Mike, you keep referring to the burger menu? But i am referring to the menu with the fysiosportief logo and cta button that you helped me build?..

    #1464835

    Hi,
    Sorry, I miss read this, try adding this css:

    #menu-test-menu-with-logo {
    	width: 100%;
    	display: flex;
      justify-content: space-between;
    }

    Best regards,
    Mike

    #1464957

    no worries, the CSS works, thanks! is there a way to make it sticky as well?

    #1465113

    Hi,
    To make the custom menu with logo sticky, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function add_sticky_script(){
        ?>
    <script type="text/javascript">
    (function($){
          function a() {
              $(window).scroll(function(e){
                var $sticky = $('#menu-test-menu-with-logo');
                var position = ($sticky.css('position') == 'fixed');
                if ($(this).scrollTop() > 25 && !position){
                  $sticky.css({'position': 'fixed', 'top': '0px','width' : $sticky.innerWidth() });
                  $sticky.addClass('fixed_element_style');
                }
                if ($(this).scrollTop() < 25 && position)
                {
                  $sticky.css({'position': 'static', 'top': '0px', 'width' : '' });
                  $sticky.removeClass('fixed_element_style');
                }
              });
          }
        
          a();
    })(jQuery);
    </script>
        <?php
        }
    add_action('wp_footer', 'add_sticky_script');

    I also added this css so the menu would rest at the top of the screen, previously there was a small space above, on my install.

    #header_meta {
    display: none;
    }
    .html_header_transparency #top .avia-builder-el-0 .container{
        padding-top: 58px;
    }

    If you don’t have a space you won’t need this, if you want to keep the space, adjust the code above.
    To make the mobile menu sticky add this css:

    @media only screen and (max-width: 989px) {
      .responsive.html_mobile_menu_tablet #top #wrap_all #header {
        position: fixed;
      }
    }

    Best regards,
    Mike

    #1465367

    Hi Mike,
    the menu is sticky, but sometimes website content is on top/front of it. How do I set it to be on the front?
    header behind content (see image over it on the right)

    also, I’m experimenting with my page layour and ideally would like to combine this menu with the so called ‘full width slider’. but i tried several things to make this work, but insofar no luck.
    front

    backend

    how would i go about?

    also, ideally I have breadcrumbs below the menu, on the left side. for which i use the shortcode [av_breadcrumbs]

    #1465374

    Hi,
    This sounds like a z-index issue, but I would need to see your site as I can’t reproduce this on my site.
    Please let us know when your site is online so we can see it.

    Best regards,
    Mike

    #1465376

    site is live* (front is password protected). see credentials for you in private content

    #1465589

    Hi,
    Thank you for your patience, I didn’t see an issue on the page that you linked to, but I found a another page with the issue, indead it was a z-index issue, so I added the custom class section-with-menu to the color section with the menu shortcode:
    Enfold Support 6470
    and added this css to your Quick CSS:

    .avia-section:not(.section-with-menu) {
    z-index: 0;
    }
    .avia-section.section-with-menu {
    z-index: 2;
    }

    and this seems to have helped, please check the page below and try to make this adjustment to your other pages.

    Best regards,
    Mike

    #1465960

    Hi Mike, I noticed that the header is not exactly yet at the same width as the content of the site, see
    header not wide enough
    how do i adjust that?

    #1465965

    Hi Mike, I’m suprised that you say that nothing is wrong in the page https://fysiobreda.thedigitalmanager.nl/behandelingen/dry-needling/, as this is how the menu is looking:

    white space above full width slider

    Whats wrong is:
    – there is a white space above the full width dia slider, the menu is not ‘on top of the full width slider/ content’

    What I try to achieve is:
    – the menu is on top of the content / full width slider, as is the case on for example https://fysiobreda.thedigitalmanager.nl/
    desired result
    Could you set that up for page, so I can use that as a template for other pages?

    #1465972

    Hi Mike, question nr 3 and 4:

    – there is still text behind the logo on the left, how do i get rid of that?
    – how do i delete the grey bullet points left of the subpages in the menu
    menu

    #1465998

    Hi,
    Please note, on this page with the image behind the menu:
    Screen Shot 2024 09 01 at 9.42.48 AM
    you are using a color section with a background image and the menu in the code block element:
    Screen Shot 2024 09 01 at 9.45.43 AM
    but on the portfolio page you have a color section with a no background image and the menu in the code block element, and a slider below.
    Screen Shot 2024 09 01 at 9.47.50 AM
    So adds a new challenge :( The solution seems to be to add the custom class section-with-menu-no-background and this css:

    .avia-section:not(.section-with-menu-no-background) {
    z-index: 0;
    }
    .avia-section.section-with-menu-no-background {
    z-index: 50;
    position: absolute;
    background: transparent;
    }

    I did this for you, please check.
    Screen Shot 2024 09 01 at 10.27.33 AM

    Best regards,
    Mike

    #1465999

    Hi Mike, I understand the confusion, I will change all pages to the full width slider with menu. many thanks.

    can you advice on the questions 3 and 4 as written above & how to get the menu exactly in the same width as the content (also see above)?

    #1466003

    Hi,
    #3 try this css:

    #top #header .av-main-nav > li.button.logo > a {
    	font-size: 0;
    }

    #4

    .av-main-nav ul li {
        list-style-type: none;
    }

    Best regards,
    Mike

    #1466480

    Hi Mike, many thanks for your patience, we are nearly there. There was one question you overlooked for a few times:
    – how to get the menu exactly in the same width as the content (also see above)?

    #1466644

    Hi,
    Thanks for your patience, when I check the menu is within a couple of px of the page content. It is currently set to 100% and changing any higher makes it too large.
    I will need to investigate more.

    Best regards,
    Mike

    #1466984

    Hi @Mike ! Any luck insofar? :)

Viewing 30 posts - 1 through 30 (of 35 total)
  • You must be logged in to reply to this topic.