Moving page

  • Resolved Lmarso

    (@lmarso)


    11 years, 3 months ago

    Hi, I have a little problem on my website that is something I can’t resolve, so I came here.

    The thing is: when you mouse hover the button of the current page, from the bottom line everything moves a little, and I just want to know if any of you guys can help me fix this.

    My template is Catch Everest V.1.1

    And my website is this: https://henriqueguimaraes.net/multimediaonline/

    Thanks for helping

Viewing 8 replies - 1 through 8 (of 8 total)

  • it moves because your :hover pseudo class changes the thickness of the borders, thus causing all content below it to shift back up

    To remedy the issue change this in your CSS file:

    #header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #colophon #access-footer ul.menu a:hover, #colophon #access-footer ul.menu a:focus { border-bottom: 1px solid solid #603388; border-top: 1px solid solid #603388; }

    TO

    #header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #colophon #access-footer ul.menu a:hover, #colophon #access-footer ul.menu a:focus { border-bottom: 3px solid solid #603388; border-top: 3px solid solid #603388; }

    I hope this helps.

    Thread Starter Lmarso

    (@lmarso)

    Right, but I wanted those thin borders like that. Isn’t there another way?

    What do you mean?

    You want the border to remain thick (3px) on the current page, but every other menu item that you hover on you want a thin(1px) border?

    Possibly add a hover psedo class to the .current-menu-item class:

    example:

    .current-menu-item:hover { border-top:3px solid #673695; border-bottom:3px solid #673695' }

    so that when you hover on the current-menu-item there is no change, but when you hover on anything else the thin border appears.

    edit: I just tried with the current-menu-item:hover, and the content still jumps a bit

    Thread Starter Lmarso

    (@lmarso)

    I did it! Thanks to your help…

    I used your code but changed the size to 2px.

    I appreciated, this thread can be closed now

    Have a nice day!

    Great. I’m glad that you were able to get this resolved!

    Have a wonderful afternoon

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Moving page’ is closed to new replies.