CSS Help with placing a fixed menu

Support
#1

Hi there,

I’m trying to create a scrollable menu here:

I’m using the following CSS:

.positionfixed {position: fixed; top:70%;}

The issues are:

  1. It breaks the top rows layout. Maybe I could put it in a separate row and that might be that.
  2. I can’t click elements in the nav while it is on position:fixed;
  3. I have a particle animation going on, for which I placed 1em to the left spacing on the li items. However, this seems to dissappear and the animation goes right through them.
  4. If I scroll to the bottom of the page, the nav goes through the footer, is there a way to maximize the bottom position of it, so it does not go through?

Do you have any suggestions?

I uploaded the website to a staging site to make it easier to see what I mean.

http://bigfish.ethermedia.hu/etelek

Also, another, probably easier problem to fix:

http://bigfish.ethermedia.hu/hogyan-kerul-az-asztalra/

Why is the YouTube embed so small?

Thanks!

#2

Hi @Pbalazs89,

Yes, your current setup will not work due to structure issues. If you want to proceed with that, please create it in the header builder. Use bottom header. That is fixed on the bottom of the page by default. Then add a navigatoin element.

Because of this custom CSS on your child theme style.css file
iframe { max-height: 150px; }
Remove that and it will show as expected. That CSS is too general. Please add a class or ID so it worn affect all iframes on your site

Hope this helps.

1 Like
#4

Thanks, fixed!

#5

You’re always welcome @Pbalazs89!

Cheers.

#6

Hi again,

The second issue was fixed, but now I tried applying your solution to the sticky menu. However, upon opening header builder, I can’t find anything called a bottom header. Where is this? Should I add it to the top header, to the sticky header, or a separate container?

Thanks!

#7

Hi @Pbalazs89,

You may create a new header for this. Under Layout > Choose BOTTOM

Hope this helps.

#8

Hi again,

So I created a bottom header, but I’m running into issues of the same sort, here’s a small video:

https://youtu.be/d-kvc41Zlzw

So here’s the thing, I’ve added a top-margin to it, so it starts at the right spot, but after initially leaving the header area, I would like it to come up a bit so all items are visible. Once I scroll down to the bottom, I’d prefer it to stick to the body area. Is this possible with Pro, or should I let this go?

I’m sure it’s possible with JS, but I’m not sure you’d advise that. I’m just looking for some suggestions how to approach the issue.

Thanks!

#9

Hello @Pbalazs89,

What you have in mind could only be possible with custom development which is beyond the scope of our support.
I would recommend that you use a 3rd party plugin that enabled you to create a fixed menu area within the content only. Perhaps this link might help you:

Thank you for your understanding.

#10

Sure, thanks for helping me get so far!

#11

Hi, I managed to do it the way you suggested it, thanks a lot for that.

I would have a couple of small questions to fix the css so it looks kind of like the one I made previously in pro header.

  1. I uploaded the site from my staging environment to the web, and my style.css is not getting read. Any idea why? I mean the one in pro-child/style.css

  2. I’m trying to make an :active color for the li elements.
    I’m doing it like this:

.widget ul li a:active {color:rgb(2, 165, 228);} and I can't see it in the code, but it does not turn to the given color on the page.

  1. I’m also trying to add a particle animation like the one I can do in X by adding a ::before to the li, but nothing shows up, can you point me in the right direction?

    .widget ul li a::before {
    content: “”;
    width:20px;
    height:10px;
    transform:translate3d(-50%, -50%, 0) scale3d(1, 0, 1);
    color: rgb(2, 165, 228);
    border-radius: 100px;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    }

The site is available here:

http://bigfish.ethermedia.hu/etelek/

Thanks a bunch!

#12

Hi @Pbalazs89,

  1. I checked and it’s loaded just fine

  2. The :active selector is a selector for active elements that you focused on and hold on (touched or clicked). It’s not the one for styling an active menu item (item for loaded page). It would require a special selector, an example is for the menu item

ul li.current-menu-item a {
color:rgb(2, 165, 228);
}

Unfortunately, the widget has no selector to mark the active items so any CSS will not work. You would need to customize the widget to implement such features which, unfortunately, we can’t cover here in the forum.

  1. May I know what it’s supposed to do? I see it applied through the code but not just visible. First, you’ll have to remove this

transform: translate3d(-50%, -50%, 0) scale3d(1, 0, 1);

And change this line

color: rgb(2, 165, 228);

to a background color instead of color. The color applies to the text, but there is no text there so I assume you’re trying to implement an oval object which then should be only visible with background colors instead of colors.

And please note that you have the two set of CSS, one on style.css and another one on Theme Options. Please remove another one to make sure the changes you made will work.

Thanks!

#13

Hi there,

Thanks for the help!
I tried removing the css you suggested but unfortunately it still won’t show up.
This is what I’m aiming for:

https://www.dropbox.com/s/kbgn6ehyamong2j/Screenshot%202019-10-18%2017.11.41.png?dl=0

So basically for a line to appear from the left on hover.

#14

Hello @Pbalazs89,

Please have your code updated and use this code instead:

.widget ul li a {
    position: relative;
}

.widget ul li a:before{
    opacity: 1;
    content: "";
    width: 20px;
    height: 10px;
    margin-right: 10px;
    color: rgb(2,165,228);
    border-radius: 100px;
    display: none;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

.widget ul li:hover a:before{
    display: inline-block;
}

And please remove or change the transform: translate3d .... statement.

Hope this helps.

#15

Thanks a lot! That looks almost perfect. The last thing missing is that the :before is not vertically centered. Is there a way to do that?

#16

Hi @Pbalazs89,

It seems you have added a vertical alignment, and yes it will never work on that setup. You’ll have to use top positioning and adjust it until it’s appear centered. Please update your CSS from this

.widget ul li a:before {
    position: relative;
    vertical-align: center;
    opacity: 1;
    content: "";
    width: 30px;
    height: 8px;
    margin-bottom: 0;
    margin-right: 10px;
    background-color: rgb(2,165,228);
    border-radius: 100px;
    display: none;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

to this

.widget ul li a:before {
    position: relative;
    top: -5px;
    opacity: 1;
    content: "";
    width: 30px;
    height: 8px;
    margin-bottom: 0;
    margin-right: 10px;
    background-color: rgb(2,165,228);
    border-radius: 100px;
    display: none;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

Just change the value for top: -5px; until it aligns based on your preference.

Thanks!

#17

Thanks a lot!

#18

You’re must welcome,

Cheers!

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.