-
Posts
-
Hi,
We now use the header with logo left and menu right.
We want to change this to logo left and menu below. But then there is a huge gap in the right of the menu, with functional space that is not used. You offer the option to place social media icons there, but that is not functional for us.We need to have the option to place an extra menu on the right side of the logo, how can we achieve this?
We think it would be very functional to add this in you theme possibilities.PS: is it also possible to create a special mobile version of lets say the main menu, that is only shown on mobile?
Hey hotspot,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi Victoria,
The link to our site is in the private content.
We created the blue horizontal menu manually. Now we want the themes functionality (logo left and menu below) to create our main menu there.
But with that setup social media logo’s are placed in the logo area on the right side (where now the menu ‘home’ ‘webwinkel’ and ‘contact’ resides).We don’t want that, instead we would like to have a secondary menu there. How can we achieve that?
Hi hotspot,
You can disable the social in the theme options and try to adjust the Enfold menu position. Can you show us what you’ve got with the Enfold menu? And please add credentials.
Best regards,
VictoriaHi Victoria,
What do you mean with ‘try to adjust the enfold menu position’?
The theme does not support a menu in that location other than the social menu, this is really disappointing. We use the theme for our webshops, and a lot of shops work with extra navigation now a days.Maybe im not clear enough, so here an image of the location we need to place a secondary menu:
Hi hotspot,
This can be achieved by either using a plugin or writing code to add the new menu location.
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
VictoriaHi hotspot,
This can be achieved by either using a plugin or writing code to add the new menu location.
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
VictoriaHi Victoria,
That is really disappointing.
What plugin wouls achieve placing a menu on that location?
Hi hotspot,
Here are some menu plugins
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
The problem is not creating a menu, the problem is the placement of the menu in that certain location.
Please adviseHi hotspot,
Here is an article for you
https://firstsiteguide.com/display-wordpress-menus/Best regards,
VictoriaHi,
As I understand you like to have 2 menus in the header area, one on the right side of the logo and one below the logo correct?
To achieve this header layout please perform the below steps:
1. Select “Logo left, Menu right” from Enfold > Header > Menu and Logo position
2. Enable header widget area so we can place a menu here using the shortcode later. NOTE: Just paste the php function in functions.php to enable the header widget and please Do NOT copy the CSS code as our alignment is different.
3. Enable debug mode which will allow you to copy the menu shortcode.
4. Go to Appearance > Menu and create the menu you like to display and click “SAVE”.
5. On a blank page drop the “Fullwidth menu” element ( UNCHECK STICKY SUBMENU ) and select an existing menu from the dropdown list. Once you are happy with the menu you will see the shortcode below.
Example fullwidth menu shortcode:
[av_submenu which_menu='' menu='27' position='center' color='main_color' sticky='aviaTBsticky' mobile='disabled' custom_class=''] [av_submenu_item title='Menu Item 1' link='' linktarget='no' button_style=''] [av_submenu_item title='Menu Item 2' link='' linktarget='no' button_style=''] [/av_submenu]6. Drop a “Text Widget” inside the “header” widget area we created earlier and paste the menu shortcode in the text view as shown below.
7. Add the below CSS to your site
/* Background color for submenu */ #top #header .av-submenu-container { background-color: #37a8e0 ; } /* Background color for menu items */ #top #header .av-submenu-container a { background-color: gold; } /* Submenu item link color */ #top #header .av-subnav-menu li a { background-color: transparent; color: #333; } /* Background color for header when scrolled */ #top #header_main { background-color: rgba(560, 54, 94, .5); } /* Show fullwidth submenu below the menu overlay */ .responsive #top #header .av-submenu-container { z-index: -1!important; } @media only screen and (max-width: 767px) { .responsive #top #header .av-submenu-container { z-index: -1!important; }}The “Fullwidth submenu” element will appear below the logo in the header area.
Best regards,
VinayHi,
If you like a much easier way to add 2 menus you can use the header top bar(The menu will appear on top instead of bottom ).
As I understand you like to have 2 menus in the header area, one on the right side of the logo and one below the logo correct?
To achieve this header layout please perform the below steps:
1. Select “Logo left, Menu right” from Enfold > Header > Menu and Logo position
2. Enable “Header Secondary Menu” from Enfold > Header > Extra elements > Header Secondary Menu
3. Go to Appearance > Menu > and assign a menu to the top bar and save.
Best regards,
VinayHi Vinay,
Thanks for your reply.
We already have a top menu, so that is not an option.
If i understand correct, with your widget are solution it means we have to input the extra menu manually in every page?
As you can imagine this is not workable for us.Looking forward to your reply.
JuliaHi,
Using a header widget area we can display the menu on all the pages. You have to add the full-width submenu shortcode only once in the header widget area :)
Best regards,
VinayHi Vinjay,
Is it also possible to do it the other way around?
So we select the initial setup to be ‘logo left, menu below.
And the widget menu will replace the menu on the right of the logo.Let me know.
Thanks JuliaHi,
A fullwidth submenu cannot be placed next to logo because it is a fullwidth element and take’s up the whole space, sorry about that.
I have updated the earlier post with custom CSS please feel free to change the color values in the code to suit your design.
Best regards,
VinayHi Vinay,
I have created a new menu option, by placing this code in the functions file if the child theme:
function register_my_menu() { register_nav_menu('custom-header-area-menu',__( 'HSD Header area menu' )); } add_action( 'init', 'register_my_menu' );Now i have to place this php code in the header to have the menu appear:
<?wp_nav_menu( array( 'theme_location' => 'custom-header-area-menu', 'container_class' => 'new_menu_class' ) ); ?>As you know we have the logo left and want this menu to appear on the right side of it in the header. It needs to be placed after the <span class=”logo”></span>
Where in the php files i have to place this? There is the file includes/helper-main-menu.php, this is where the header area is built… Is this the way to do that? or is there an easier way to achieve this. Maybe by placing the php code in the functions file and tell it to show up there?
ps: can we also copy files like the “includes/helper-main-menu.php” in the child to replace it?
Hope you have an idea how to finally solve this.
Hi,
Thank you for getting back to us. From what I remember seeing the site last time it has changed a bit and looking nice :)
This is a complicated approach to add two menus. In this approach, the drawback is that you need to load your header.php file from child theme or else the changes will be overwritten when you update the theme. Since we are constantly releasing updates anytime there is a change in the header.php file you have to re-import it.
A much easier way would be to add a navigation widget to the header widget area and style it accordingly.
Please share a screenshot/mockup of the end result you are looking for it will help me assist you better.
https://snag.gy/
https://ctrlv.cz/en/
https://imgur.comI may also require your login details to set things up for you please share credentials in private content area.
Best regards,
VinayHi Vinay,
Thanks for helping. A link below of what we want to achieve. The thing is that i there scripted the blue / orange menu myself in there.
Can you elaborate on this: A much easier way would be to add a navigation widget to the header widget area and style it accordingly.
I believe i allready tried this but it was not possible to achieve what we wanted.I’m getting mad about this, so i was thinking as a last option to try. Maybe add the extra zustom menu that i want to place as the blue menu. But then i would try to add a lot of styling and classes to have it behave in the same way the enfold menu would. And that also for the sub menu..having it be and behave like a mega menu…
Hope you have a solution
Hi,
I checked this setup on my local installation. If you need to use the mega menu in both main menus below are the two options:
1. Try using a mega menu plugin like the uber menu (or use any third party plugin) in both places https://sevenspark.com/docs/ubermenu-3/theme-integration/enfold. This method will allow you to have two main menus which can support mega menus. Since both menus will look the same, you do not have to custom style it to match one another.
2. Create a header widget area and add a mega menu plugin as a widget and style it to match the enfold menu (this will need a lot of extra CSS to match both mega menus). unfortunately, this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
VinayHi Vinay,
Thanks for helping so much. The menu in the header (right to the logo) does not need to be a mega menu. The horizontal menu below the header/logo area should.
It is not clear to me how we can create a header widget area in the position next to the logo. Is there any documentation on how to do this?
If I understand correctly, this is an easy setup and with which we can create the design we want (I sent you the designs):
[top header menu]
[logo] [header widget menu]
[horizontal mega menu]Love to hear from you.
JuliaHi,
Thank you for your understanding. It still requires quite a lot of customization to achieve the header layout as described above.
1. Go to Enfold > Header > Header Layout > Menu and Logo position > Logo left, menu below
Now you have the logo on top and main menu at the bottom which can handle the mega menu.2. Add a header widget area as mentioned here https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
3. Position the header widget to the right using the custom CSS.
4. You can add HTML code for the menu in the widget area and style it using custom CSS.
Please check this link for menu examples https://codepen.io/search/pens?q=horizontal%20menu&page=1&order=popularity&depth=everything&show_forks=falseI am very sorry to tell you that this type of customization is not covered by our support.
I hope you will find the above links helpful.
Best regards,
VinayHi,
I’m very sorry for the late reply. This functionality has not been built into the theme yet unfortunately.
Best regards,
RikardHi Rikard,
It would be a good addition to have the theme be more functional for e-commerce websites.
We love the theme functionality and have been using enfold since the beginning, but the lack of styling and menu building options is becoming a problem. It would be very sad to have to use another theme.Any idea if you could add this is the near future?
Hi,
Sorry for the late reply, I took a look at your page and believe you would like your extra menu to be level with your logo and to the right.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#nav_menu-2 { top: 80px; padding: 0 !important; z-index: 10; } #nav_menu-2 .menu-header-menu-right-container { float: right; } #nav_menu-2 .menu-header-menu-right-container li { display: inline-block; border-bottom: 1px solid; border-left: none; border-right: none; border-top: none; border-radius: 3px; background-color: #ff6600; border-color: transparent; padding: 10px; } #nav_menu-2 .menu-header-menu-right-container li a { color: #fff; }Please see the screenshot in Private Content area, and then clear your browser cache and any cache plugin, and check.
Best regards,
MikeHi Mike,
Thank for helping but the menu was always positioned like that, but after the last updates the menu moved to the left again. So this must be some kind of different error, see https://kriesi.at/support/topic/odd-menu-error-after-update/#post-1225105
Hi,
Sorry, I thought that adding the header widget area was causing the issue.
So you were at the point that the two headers on the sites below matched until you updated the theme?
I can see this css on your first site but not your second:#nav_menu-2 { position: absolute; right: 0px; margin-right: 50px; z-index: 100; }This moves your nav to the right, so perhaps this and other custom css is not activated in your second site, please check and if you do see this css then maybe you have an formating error like a missing bracket above this css.
You can check your css for errors here, try testing all of your custom css to see if you have an error in the middle of your css.Best regards,
Mike
- You must be logged in to reply to this topic.