Fullwidth Submenu - Onepage Dotsmenu - Support | Kriesi.at

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

Author

Posts
June 21, 2024 at 9:49 am #1453608

Daniela
Participant

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
Daniela

June 22, 2024 at 6:31 pm #1455620
Mike
Moderator
Hey 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';
}
```
This is the result:

Best regards,
Mike
June 24, 2024 at 12:32 pm #1457974
Daniela
Participant
Hi 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
Daniela
June 24, 2024 at 12:51 pm #1457998

Guenni007
Participant

maybe 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 different

on very small screens the dot-nav goes to the bottom.

June 24, 2024 at 8:52 pm #1458520

Mike
Moderator

Hi,
The color is set to white here:

Best regards,
Mike

June 25, 2024 at 9:46 am #1458563

Daniela
Participant

Hi 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,
Daniela

June 25, 2024 at 9:47 am #1458564

Daniela
Participant

PS: is it possible to have that menu on every page without inserting it on every single page?

June 25, 2024 at 9:51 am #1458565

Daniela
Participant

The 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 #1459278
Ismael
Moderator
Hi,

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,
Ismael
June 28, 2024 at 10:32 am #1459943

Daniela
Participant

Different 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 #1460019

Mike
Moderator

Hi,
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,
Mike

July 10, 2024 at 11:31 am #1461765

Daniela
Participant

Hi 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
Daniela

July 10, 2024 at 5:41 pm #1461792

Mike
Moderator

Hi,
In your example:

each icon links to a different pages, the dots menu above links to different section on the same page, are you still going to use it like this, for links on the same page?

Best regards,
Mike

July 11, 2024 at 10:18 am #1461832

Daniela
Participant

Hi Mike,

my version of the dotsmenu is already linked to different pages.

Regards
Daniela

July 11, 2024 at 5:31 pm #1461863
Mike
Moderator
Hi,
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,
Mike
July 31, 2024 at 10:23 am #1463418

Daniela
Participant

Hi Mike,

thanks a lot, I figured it out. Topic can be closed.

Regards,
Daniela
Author

Posts

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

The topic ‘Fullwidth Submenu – Onepage Dotsmenu’ is closed to new replies.