Forums

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

Home Forums Design Moving the text to the right side of the navbar

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #247597
    ChristianA
    Participant

    I have a few questions/requests surrounding this navbar.

    1. I want to move the text elements to the right but I am reversing the order in which they are displayed when I float them so I am attempting to move the first element over by using the left margin and that doesn’t seem to work. How can I do that?
    2. I really like how some navbars have all of the elements flush right up against each other (no space in between where the cursor changes from the link cursor to the regular pointer). How can I achieve that?

    I can not figure this out for the life of me. Any help would be appreciated. Below is the link to the codepen containing my work so far.

    http://codepen.io/ChristianA/pen/JbdoqK

    #247599
    Beverleyh
    Participant

    For point 1, text-align:right; on the menu’s ul element will send them all over to the right-hand side of the page.

    For point 2, we’d usually set the menu’s a elements as display:block; to make the active link area extend the full width of their parent li elements.

    #247600
    ChristianA
    Participant

    When I use the display:block on the a elements the elements then stack on top of each other.

    The answer for point 1 is spot on.

    This is the new CSS below.

    http://codepen.io/ChristianA/pen/JbdoqK

    #247601
    ChristianA
    Participant

    When I use the display:block on the a elements the elements then stack on top of each other.

    The answer for point 1 is spot on.

    This is the new CSS below.

    http://codepen.io/ChristianA/pen/JbdoqK

    I notice that in the codepen display that the elements are centered in the middle of the black bar (as I would like them) but in Firefox they are at the top of the bar. I am using a reset in order to override the browser’s presets for margins and padding. What can I do in order to center the text in the middle of the bar?

    #247602
    Beverleyh
    Participant

    When I use the display:block on the a elements the elements then stack on top of each other.

    That was for something else – my misunderstanding. To make the li buttons sit flush up against each other you have to get rid of the spaces that are created by new-lines in the html. Here are some ways to do that https://css-tricks.com/fighting-the-space-between-inline-block-elements

    What can I do in order to center the text in the middle of the bar?

    Here are ways to vertically align elements https://css-tricks.com/centering-css-complete-guide/

    And, the borders of the elements are not touching on the left and right sides of each element.

    Try cancelling one of the side borders on the li elements with border-left:0;. Then use li:first-of-type { border-left:2px solid #fff } to put it back on the first li.

    and for the element over which the cursor is hovering to be highlighted

    You can use the :hover selector li a:hover { /* your styles here */ }

    #247605
    ChristianA
    Participant

    Making the li elements inline-blocks helped but did not move the text to the middle of the bar.

    The hover works now. I’m not sure what I was doing wrong earlier when I tried to do that.

    I used a technique from the link you provided and it was successful.

    #247610
    ChristianA
    Participant

    If you are still willing to help I could use it with trying to move the text down to the middle of the bar.

    #247613
    Beverleyh
    Participant

    Ok, what have you tried?

    There’s also the vertical-align with faux tables technique if you haven’t tried it already van$eodesign.com/blog/demo/vertical-centering/table-cell.php

    Note: Change the $ to an ‘s’ before pasting the link above into your address bar. The forum won’t allow me to post anything with that 3-letter acronym for search engine friendliness.

    #247625
    ChristianA
    Participant

    I have tried the things I mentioned in my earlier post. The inline block method worked to move all of my elements closer but there is still a small amount of space in which the cursor changes between the two cursor styles as it moves across from one element to the next.

    Do you think that making the element fit perfectly into the height of the navbar would help? I’m not sure how to do that but at that point I think that I can use the vertical-align in order to move the text to where I want it.

    #247612
    Beverleyh
    Participant

    Ok, what have you tried?

    There’s also the vertical-align with faux tables technique if you haven’t tried that already http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php

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