Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to set menu text properly against menu?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #250023
    CranberryJuice
    Participant

    I’ll just do this, here is the codepen: http://codepen.io/YukiH/pen/ygJORN
    It’s pretty self-explanatory upon looking at the link. I modified this from http://line25.com/tutorials/how-to-create-a-trendy-flat-style-nav-menu-in-css but I run into this issue where the text does not rest alongside the menu at all when I hover over one of the boxes. When I resize the window (code pen example) the text either overlaps with the navigation box in the x axis, or the text is extremely far away from the menu itself. I want it to rest alongside the edge of the menu box itself. Can someone show and explain to me how to fix this so that the text rests along the menu itself no matter what?
    Unrelated, but second question: currently the css is written that when the menu box (link) is on :focus that the text is visible. Is there a way to override :focus text with :hover text upon hover? Right now it shows both.

    #250025
    Paulie_D
    Member

    You seem to have been playing with absolute positioning the spans without setting the proposed parent to relative.

    In this case it would be the ul…which needs to be collapsed to it’s own width…in this case by floating

    http://codepen.io/Paulie-D/pen/OWXGRR

    #250045
    CranberryJuice
    Participant

    Thank you. Could you explain to me how I could have better understood what was the parent in this case in order to have applied the positioning?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.