Create a vertical fixed right dot navigation - Support | Kriesi.at

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

Author

Posts
February 5, 2017 at 8:23 pm #743053

webWahine
Participant

Hello

My client wants something just like this dot nav – I assume that I should make color sections and then a widget with some code and also css to make the dots link to the sections. Please advise. I’d actually prefer to use the color section scroll arrow but for some reason it’s not working on my test site (see private), so please consider that another request, to debug. Thanks so much!

http://codepen.io/tutsplus/full/VvZXMP/

February 5, 2017 at 8:32 pm #743054

webWahine
Participant

I see why it’s not working – I deleted this css –

#emblem {
left: 0px;
top: 0;
padding-top: 0;
position: fixed;
z-index: 999999;
background: url(“http://www.rentkaslo.com/images/banner.png”) left top no-repeat fixed;
height:100%;
width:100%;
}

And the scrolling works again – is there a different way to have a fixed banner that will not interfere with the scrolling function?

Thanks, again!

February 5, 2017 at 8:58 pm #743060

webWahine
Participant

Sorry to keep bumping but I realise that the emblem is also stopping my link from working on the location map, so I guess I need a much better alternative to the css, above.

February 5, 2017 at 10:59 pm #743072

webWahine
Participant

Sorry, again, but I have made some changes and almost have this as it should be but need a bit more help with the banner, please. Still need help with the dot nav, though.

I made a color section and gave it an ID of #banner, then added this into my css –

#banner {
position: fixed;
height: 280px !important;
display: block;
z-index: 500;
width: 100%;
padding: 0;
background-color: rgba(0,0,0,0) !important;
margin-top: -10px;
margin-left: -10px;

}

.html_header_transparency #top .avia-builder-el-0 .container {
padding-top: 0px;
}

#banner .container {
max-width: 100%;
padding-left: 0px;
}

The only thing is that when I use the scroll arrows, which work now that I have removed the emblem css, is the last one is 10 pixels up because of the border all around the page – how can I tweak that, please, or instead could I make a 10 pixel border around each color section? Thanks :)

February 9, 2017 at 9:57 pm #745093

webWahine
Participant

I don’t mean to bump here but it’s been 4 days and I’m trying to get the vertical dot navigation working because my deadline is looming – just some general ideas about how to implement this would be great. I’ve managed to work out the border issue, so I’m sharing the css here –

#emblem {
left: 0px;
top: 0;
padding-top: 0;
position: fixed;
z-index: 999999;
background: url(“http://www.rentkaslo.com/images/banner.png”) left top no-repeat fixed;
height:280px;
width:280px;
}

#top-border {
height:10px;
width:100%;
background:#6f9136;
z-index:999998;
position:absolute;
}

div.container_wrap.fullsize /*avia-bg-style-scroll.avia-no-border-styling */{
/*
*/
position:relative;
bottom:-10px;
}

February 10, 2017 at 1:29 pm #745402
Vinay
Inactive Moderator
Hi,

Sorry for the delay, please remove the code you already tried and add the below code in Quick CSS.

If you like to target only specific pages please add the page ID before .avia-menu with a space inbetween example: .page-id-xx .avia-menu for all 3 CSS selectors below.
```
/* One page dots navigation */
.avia-menu {
	position:fixed;
	max-width:0px;
	height:auto!important;
	right:50px;
	top:50%;
	transform:translateY(-50%);
}
.avia-menu .menu-item {
	max-width: 25px;
	max-height:25px;
	border-radius:25px;
	margin:10px;
	overflow:hidden;
}
.avia-menu .avia-menu-text {
	display:none;
}
```
Best regards,
Vinay
February 13, 2017 at 8:01 pm #746596

webWahine
Participant

Thanks, I added this in and made it specific to a test page (see private link) and I see nothing. I’m pretty sure I’m missing something to make this work. I made a new menu called dots and added in links and then set the header on the test page to show and it didn’t make any change. Please advise :)

February 14, 2017 at 11:13 am #746807
Vinay
Inactive Moderator
Hey!

I think you are using an old version of enfold or you have set up the menu in a different way. Please update to the latest version 3.8.5 and your code for the page should be as below:
```
/* One page dots navigation */
.page-id-140 .avia-menu {
	position:fixed;
	max-width:0px;
	height:auto!important;
	right:50px;
	top:50%;
	transform:translateY(-50%);
}
.page-id-140 .avia-menu .menu-item {
	max-width: 25px;
	max-height:25px;
	border-radius:25px;
	margin:10px;
	overflow:hidden;
}
.page-id-140 .avia-menu .avia-menu-text {
	display:none;
}
```
If you still have any issue please provide us the admin login details so we can login and take a closer look.

Regards,
Vinay
February 14, 2017 at 7:57 pm #747073

webWahine
Participant

Hi Vinay

I am using 3.8.5 with a child theme, and that is exactly the code I have in the style.css. I see the default menu in the header, so not the menu I want to show, and none of the styling from this css is applied. My access info is in my first post, above (private). Thanks again :)

February 14, 2017 at 8:04 pm #747075

webWahine
Participant

Ok, so I’ve hidden the header on this page, created a custom menu called ‘dots’ and then a widget called ‘dotNav’ and linked it to the ‘dots’ menu. I see the default text but it’s not working, ie, not picking up on any of the styling so it’s not seeing a link. Please advise and thanks again.

February 15, 2017 at 1:08 am #747229

webWahine
Participant

Still not working.

I had to change it to this to see the correct container –

.page-id-140 .menu-dots-container {
position:fixed;
max-width:0px;
height:auto!important;
right:50px;
top:50%;
transform:translateY(-50%);
}

The hide text worked but the other styling didn’t show up so thanks again and please advise :)

February 20, 2017 at 8:06 am #749181
Ismael
Moderator
Hi!

Please try the following css code:
```
#main > .main_color.container_wrap_first.container_wrap.fullsize {
    z-index: 9999;
}

#menu-dots {
    position: relative;
}

#menu-dots li a:before {
    background: white;
    width: 8px;
    height: 8px;
    margin: 2px 0;
    border-radius: 8px;
    display: block;
    content: '';
}

#menu-dots li a {
    display: block;
    width: 8px;
    height: 8px;
    font-size: 0;
}

#menu-dots li:hover:before {
    width: 10px;
    height: 10px;
    border-radius: 10px;
}
```
Best regards,
Ismael
February 20, 2017 at 8:11 pm #749540

webWahine
Participant

Almost there but the text indent css isn’t taking effect, so still showing up, the dots are really close together, and is there a way to make a dot change style when clicked, ie, active? :)

February 21, 2017 at 6:19 am #749727
Ismael
Moderator
Hi!

We updated the css code above. Please try it again then edit the following css code:
```
.page-id-140 .menu-dots-container {
    position: fixed;
    max-width: 0px;
    height: auto!important;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
}
```
.. replace it with:
```
.page-id-140 .menu-dots-container {
    position: fixed;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
}
```
Cheers!
Ismael
February 21, 2017 at 7:35 pm #750132

webWahine
Participant

Hi Ismael

No change, sigh… I tried reloading several times and another browser.

February 22, 2017 at 7:27 am #750286
Ismael
Moderator
Hey!

It’s still serving the old version of the style.css file. You can still see this css declaration:
```
#menu-dots li a {
    text-indent: -9999px !important;
    display: block;
    top: 3px;
    position: absolute;
    width: 8px;
    height: 8px;
}
```
Please purge the server or the cdn cache. Or deactivate it entirely while you’re working on the site.

Regards,
Ismael
February 22, 2017 at 9:13 pm #750665

webWahine
Participant

Thanks so much, Ismael. Odd because I saw the styling as it should be then it reverted back to the previous style. It’s on goDaddy and I’m trying to purge that cache but it’s not working, sigh. I think we’re ok here but now with the code but I have to deal with caching issues. I installed a plugin but that isn’t helping :(

February 24, 2017 at 4:30 am #751206

Ismael
Moderator

Hey!

Please contact your hosting provider regarding the cache issue. They can probably control it manually.

Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.