![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
June 21, 2024 at 9:49 am #1453608
Hi there,
I followed your advice to create a dotsmenu as described here
What I actually want to achieve is creating a menu on the right side of the page similar to the described dotsmenu but it should show icons. I therefore created a new menu with entypo fontello icons and used it as a submenu.
Which part of the code given in the above mentioned link do I use to simply move the icon menu to the right side of the page? I tried to copy in the single parts of the code given, but it just does not work the way I want it to.
Your help is highly appreciated.
Regards
DanielaJune 22, 2024 at 6:31 pm #1455620Hey Daniela,
I recommend creating a dotsmenu as described in our documentation and create the simple custom menu in the element:
with the custom class dotsmenu:
then to use entypo-fontello icons, go to your icon element and hover over the icons that you want to use and the chrcode will show, always drop the first “U”, so the code that you will use for this screenshot will be \e804
Then use this css, at teh bottom you will see the six icons for the six menu items in my example, add more if you wish:#top .dotsmenu { background: transparent; position: fixed!important; right: 10px; top: 50%!important; transform: translateY(-50%); border: none!important; max-width: 30px!important; } #top .dotsmenu .av-subnav-menu > li { display: inline!important; margin: 10px !important; } #top .dotsmenu .av-subnav-menu li a { max-width: 40px; max-height:45px; border-radius:0; overflow:hidden; padding: 0 !important; border: none!important; background: transparent; } #top .dotsmenu .av-subnav-menu li a .avia-bullet { display: none !important; } #top .dotsmenu .av-subnav-menu li a .avia-menu-text { visibility: hidden; } @media only screen and (max-width: 767px) { .responsive #top .dotsmenu { background: transparent; position: fixed!important; right: 0; top: 50%!important; transform: translateY(-50%); }} #top .dotsmenu .av-subnav-menu li a:before { display: inline-block !important; font-size:30px; color: #fff; } #top .dotsmenu .av-subnav-menu li:nth-child(1) a:before { content: '\e804'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(2) a:before { content: '\e82a'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(3) a:before { content: '\e83d'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(4) a:before { content: '\e8b3'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(5) a:before { content: '\e8d2'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(6) a:before { content: '\e8b9'; font-family: 'entypo-fontello'; }
Best regards,
MikeJune 24, 2024 at 12:32 pm #1457974Hi Mike,
thank you. It seems to work but somehow I cannot change the color of the icons. I tried to insert the color code in this part of the css:
#top .dotsmenu .av-subnav-menu li a:before { display: inline-block !important; font-size:30px; color: #fff; }
but nothing changes.
Regards
DanielaJune 24, 2024 at 12:51 pm #1457998maybe have a look at: https://pureinstall.webers-testseite.de/dot-navigation-with-colored-sections/
here are all icons the same – but if you like these could be differenton very small screens the dot-nav goes to the bottom.
June 24, 2024 at 8:52 pm #1458520June 25, 2024 at 9:46 am #1458563Hi Mike,
I tried to replace this with another hex code, but it does not change. (I changed it to black yesterday, it was displayed in white yesterday but in black today after logging in again. I want it to be #b51917 but it just does not work.)
Different question: is it possible to have a box around the icons like a tab in a folder?
Thanks a lot.
Regards,
DanielaJune 25, 2024 at 9:47 am #1458564PS: is it possible to have that menu on every page without inserting it on every single page?
June 25, 2024 at 9:51 am #1458565The display problem is solved. I entered css in style sheet, not in theme options. Now I copied it into the theme options and it works.
June 26, 2024 at 8:04 am #1459278Hi,
PS: is it possible to have that menu on every page without inserting it on every single page?
This is possible, but you will need to extract the actual shortcode of the fullwidth submenu element from the shortcode field and use it on a template hook to render it on every page.
Example:
add_action('ava_after_content_templatebuilder_page', function() { echo do_shortcode("[av_submenu which_menu='center' menu='' position='center' sticky='true' color='main_color' mobile='disabled' mobile_switch='av-switch-768' mobile_submenu='' alb_description='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0'] [av_submenu_item title='Menu Item 1'] [av_submenu_item title='Menu Item 2'] [/av_submenu]"); }, 10);
In order to enable the shortcode field and extract the shortcode, you need to switch the builder to debug mode.
// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode
Best regards,
IsmaelJune 28, 2024 at 10:32 am #1459943Different question: is it possible to have a box around the icons like a tab in a folder?
Can you have a quick look into this question?
Thanks a lot.
June 28, 2024 at 11:18 pm #1460019Hi,
Do you mean that you want a square border around the icons? Please link to your page so we can examine, I don’t find a link to your page.Best regards,
MikeJuly 10, 2024 at 11:31 am #1461765Hi Mike,
the page is not yet active and still under construction. You can see an example for what I want to achieve here.
Best regards
DanielaJuly 10, 2024 at 5:41 pm #1461792July 11, 2024 at 10:18 am #1461832Hi Mike,
my version of the dotsmenu is already linked to different pages.
Regards
DanielaJuly 11, 2024 at 5:31 pm #1461863Hi,
Ok then, does it have to have the exact shape as above, or can it be square?
I guess you could use a background image for the shape, but it might be a challenge if you change the number of menu items in the future.
A square shape would be easier since that is the shape of the element.
To use css to add a background color, add the color to the dotsmenu previous css like this:#top .dotsmenu { background-color: red; }
and then adjust the previous dotsmenu width css to suit.
Best regards,
MikeJuly 31, 2024 at 10:23 am #1463418Hi Mike,
thanks a lot, I figured it out. Topic can be closed.
Regards,
Daniela -
AuthorPosts
- The topic ‘Fullwidth Submenu – Onepage Dotsmenu’ is closed to new replies.