Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 11, 2021 at 5:42 pm #1305312
    webWahine

    Hello
    I’ve used the demo css and have played around a little but I can’t figure out how to:
    1) Hide the white background under the dots
    2) Make the overall menu smaller, ie, less vertical padding between each dot.
    3) Indicate which section you are in with an active dot styled differently than the others.

    Here’s what I have:

    /*-----------------------------------------------------------------------*/
/*       dots menu for services - .page-id-27
/*-----------------------------------------------------------------------*/

.dots-menu + .sticky_placeholder {
	display: none;	
	height: 0px !important;
}

.page-id-27 #sub_menu1 {
    background: red!important;   
}

#top .av-subnav-menu {
  background: transparent!important;
    /* text-align: center; */    
}

#top .dots-menu {
  position: fixed!important;
  right: 0px!important; /* default 10 */
  top: 50%!important;
  transform: translateY(-50%);
  border: none!important;
  max-width: 30px!important;
}

#top .dots-menu .av-subnav-menu { 
  background: transparent!important;
}

#top .dots-menu .av-subnav-menu > li {    
    display: inline!important;
    margin: 2px !important; /* default 10px all around */
}
#top .dots-menu .av-subnav-menu li a {
  /* border: 5px solid grey!important; */
  max-width: 10px;
  max-height:10px;
  border-radius:10px;  
  overflow:hidden;
  padding: 0 !important;
  border: none!important;
  background: #00ccff;
    margin-left: 5px!important;
}

#top .dots-menu .av-subnav-menu li a:before {
  background: transparent!important;
}

#top .dots-menu .av-subnav-menu li a:hover {
  border: 3px solid #939598!important;
  background: #fff!important;
}

#top .dots-menu .av-subnav-menu li a:active {
    background: green!important;
}

#top .dots-menu .av-subnav-menu li a .avia-bullet {
  display: none !important;
}
#top .dots-menu .av-subnav-menu li a .avia-menu-text { 
visibility: hidden;
}

/* mobile tweak */

@media only screen and (max-width: 989px) {
    .responsive #top .dots-menu {
      background: transparent;
position: fixed!important;
  right: 0;
  top: 50%!important;
  transform: translateY(-50%);
}
}

    Please help and thank you!

    June 14, 2021 at 6:04 am #1305511
    Nikko

    Hi webWahine,

    Please add this CSS code on your Quick CSS:

    #top #main .dots-menu {
    background-color: transparent !important;
}

#top #main .dots-menu .av-subnav-menu > li {
    padding: 5px 0;
    display: block !important;
}

    Hope it helps.

    Best regards,
    Nikko

    June 14, 2021 at 7:42 pm #1305666
    webWahine

    Thank you! That worked well. The only thing left is how to target the active dot with unique styling, please :)

    June 14, 2021 at 8:52 pm #1305670
    webWahine

    Ok, so I got the active dot working myself –

    #top .dots-menu .av-subnav-menu li a:focus {
    background: blue!important;
}

    Another new question – is it relatively straightforward to add in text on hover? Thanks again :)

    June 15, 2021 at 5:29 am #1305710
    Nikko

    Hi webWahine,

    Yes, you can just remove the overflow hidden on the hovered < a > tag and visibility hidden to the .avia-menu-text.
    I hope this direction helps.

    Best regards,
    Nikko

    • This reply was modified 3 years, 6 months ago by Nikko.
    June 15, 2021 at 5:39 pm #1305871
    webWahine

    Sorry, but could you send me the css please?

    June 16, 2021 at 4:48 am #1305930
    Nikko

    Hi webWahine,

    Please try to add this CSS code:

    #top .dots-menu .av-subnav-menu li a:hover {
    overflow: visible;
}

#top .dots-menu .av-subnav-menu li a:hover .avia-menu-text {
    display: inline-block;
    text-align: right;
    visibility: visible;
    width: 200px;
    position: relative;
    left: -210px;
    top: -8px;
}

    Best regards,
    Nikko

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