1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Prevent fixed navigation bar from covering texts/titles after clicking a link or a via url visit?

Discussion in 'HTML & Website Design' started by LeeV18, Mar 28, 2013.

  1. #1
    JSfiddle should explain the problem: http://jsfiddle.net/UMW26/

    or

    Like the title says, how do I prevent fixed navigation bar from covering texts/titles after clicking a link or a visit via url address that will jump you to it.

    here's a sample code I used in JSfiddle to produce the problem:
    LeeV18, Mar 28, 2013 IP
  2. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #2
    Well, first off stop using an incomplete document and omitting essential structural tags like HTML, HEAD and BODY -- this isn't 1997 and you're not writing HTML 3.2

    Secondly, fixing the height of a content area is a REALLY bad idea, and should be avoided (though did you just set that for testing? If so that's ok then)

    Third, if you don't want it fixed, why are you fixing it? that's basically what you are asking isn't it? You don't want it over the content when you scroll either by a link or manually, what the devil are you declaring position:fixed on it for?

    NOT that fixing a menu is ever a good idea given what crap it is on handhelds, netbooks, etc. Nothing like completely raping them of what little screen space they start out with.

    Though if you REALLY want that crap on a page -- the trick is you have to pad the top of your title (which should probably be a heading tag and not a DIV) equal to the height of your menu. This padding can disrupt the page layout or make the page look like arse, which is again why fixed elements are another of those bits of "gee ain't it neat" garbage I'd never put on a website in the first place. It's bad accessibility, it's extra CSS for no legitimate gains, it can alienate users, and as you just discovered, it makes internal links not look all that great either.
    deathshadow, Mar 28, 2013 IP
  3. rolodex

    rolodex Active Member

    Messages:
    349
    Likes Received:
    36
    Best Answers:
    5
    Trophy Points:
    75
    #3
    Here's your solution.

    HTML:
    1. #content-title {
    2.   margin-top: 250px;
    3.   font-weight:bold;
    4.   font-size:16pt;
    5.   padding-top:20px; }
    rolodex, Mar 31, 2013 IP
  4. joshwebguy

    joshwebguy Active Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    61
    #4
    As has already been said, my first thought is to just add some padding to the top of your title there.

    You could also set the anchor on a separate element that is above the title if this styling messes with other elements of the site... but I could also see this being done in rare cases where the content is dynamic.

    Also, I agree that a fixed menu could present issues with mobile devices and even tablets. I suggest a separate set of styles for smaller resolutions that cancels the fixed aspects of the menu. For example, I have a fixed footer on my site, but hide it on mobile devices.
    joshwebguy, Mar 31, 2013 IP
  5. Clare12345

    Clare12345 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    HTML works with CSS in an up->down way, where the HTML items or divs show up on your page in the order they are written in your HTML page. CSS just edits the placement (in a limited way) and the other attributes of those elements or divs. You can use a certain number of pixels to keep it away from the top of your page, or just remove the placement determiners altogether. You don't need to declare your position in the CSS. It will naturally be placed after what comes before it on the HTML page. Alternatively, you could also give it a certain percentage in your CSS for how far away it will be from the items before it using margin-top and padding-top.
    Clare12345, Mar 31, 2013 IP
  6. rolodex

    rolodex Active Member

    Messages:
    349
    Likes Received:
    36
    Best Answers:
    5
    Trophy Points:
    75
    #6
    I think OP declared the position for the purpose of a fixed navigation bar, like in the jsfiddle example he gave. Try it out. It's fun.
    rolodex, Mar 31, 2013 IP