Tagged: menu
-
AuthorPosts
-
July 13, 2024 at 3:34 pm #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!
- This topic was modified 2 months, 3 weeks ago by the_digital_manager.
- This topic was modified 2 months, 3 weeks ago by the_digital_manager.
July 13, 2024 at 11:01 pm #1461997Hey 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:
For the logo we will add the image via css so you will need to add the custom classes button logo
For the CTA we add the classes button cta:
Then on the page you want to use this use the option Hide Header on this page:
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:
Best regards,
MikeJuly 19, 2024 at 1:43 pm #1462489Hi 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.
2. where to add the shortcode? As a codeblock/shortcode on top of the page in the editor? or on the bottom of the page builder?
July 19, 2024 at 4:28 pm #1462502Hi,
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.
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.
Best regards,
MikeJuly 19, 2024 at 6:58 pm #1462510Thanks 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 issuesJuly 20, 2024 at 12:50 pm #1462545Hi,
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,
MikeJuly 21, 2024 at 11:29 am #1462601Hi 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.
- This reply was modified 2 months, 2 weeks ago by the_digital_manager.
July 22, 2024 at 5:29 pm #1462686Hi,
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,
MikeJuly 28, 2024 at 2:20 pm #1463149Hi,
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
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:
So now at 990px and above it looks like this:
and below 989px the mobile menu shows like this:
and when the menu is open:
I believe this is what you are trying to achieve, I linked to my example page below for you to check.Best regards,
MikeAugust 11, 2024 at 12:15 pm #1464391Hi 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 cta3. 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?
- This reply was modified 1 month, 4 weeks ago by the_digital_manager.
- This reply was modified 1 month, 4 weeks ago by the_digital_manager.
August 14, 2024 at 10:45 pm #1464636Hi,
You can change the width of the burger menu at Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width
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,
MikeAugust 15, 2024 at 8:45 am #1464668Hi 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.
August 15, 2024 at 11:09 pm #1464726Hi,
The width of the burger menu is set at Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width
The default is 500px:
which is like this at 768px:
so you can change it to something else like a percentage, I test 90%:
try to adjust to suit with a percentage that matches your content width percentage.Best regards,
MikeAugust 16, 2024 at 9:25 am #1464759Morning 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?..
August 17, 2024 at 8:00 pm #1464835Hi,
Sorry, I miss read this, try adding this css:#menu-test-menu-with-logo { width: 100%; display: flex; justify-content: space-between; }
Best regards,
MikeAugust 20, 2024 at 10:16 am #1464957no worries, the CSS works, thanks! is there a way to make it sticky as well?
August 21, 2024 at 5:43 pm #1465113Hi,
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,
MikeAugust 25, 2024 at 8:07 pm #1465367Hi 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?
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.
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]
- This reply was modified 1 month, 2 weeks ago by the_digital_manager.
August 25, 2024 at 9:43 pm #1465374Hi,
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,
MikeAugust 25, 2024 at 10:16 pm #1465376site is live* (front is password protected). see credentials for you in private content
August 28, 2024 at 5:26 pm #1465589Hi,
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:
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,
MikeSeptember 1, 2024 at 10:28 am #1465960Hi Mike, I noticed that the header is not exactly yet at the same width as the content of the site, see
how do i adjust that?September 1, 2024 at 11:25 am #1465965Hi 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:
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/
Could you set that up for page, so I can use that as a template for other pages?- This reply was modified 1 month, 1 week ago by the_digital_manager.
- This reply was modified 1 month, 1 week ago by the_digital_manager.
September 1, 2024 at 11:42 am #1465972Hi 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
September 1, 2024 at 4:28 pm #1465998Hi,
Please note, on this page with the image behind the menu:
you are using a color section with a background image and the menu in the code block element:
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.
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.
Best regards,
MikeSeptember 1, 2024 at 4:38 pm #1465999Hi 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)?
September 1, 2024 at 5:28 pm #1466003Hi,
#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,
MikeSeptember 8, 2024 at 5:26 pm #1466480Hi 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)?September 10, 2024 at 7:07 pm #1466644Hi,
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,
MikeSeptember 14, 2024 at 3:15 pm #1466984Hi @Mike ! Any luck insofar? :)
-
AuthorPosts
- You must be logged in to reply to this topic.