Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member princeeternity's Avatar
    Join Date
    Jul 2014
    Location
    Jharkhand, India
    Posts
    15
    Member #
    39703

    Post How to push content below a "fixed" position navbar?

    Hi. My logo is pushed up behind the nav bar I made which has the attribute `position: fixed`.

    I have set the `margin-bottom: 40px;` to the `<div>` element that contains the list (Alpha, Beta, etc.).

    I also tried putting the entire content sans-navbar in a `id="container"` and applied the style to the `#container` as follows: `margin: 0; margin-top: 40px;` but nothing happened.

    Quick question: and how can I **vertically** centralise the Alpha, Beta, etc. within the pink navbar?Screenshot from 2014-07-25 08:22:51.jpg

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    First question: adding styles to the nav to push the content down won't work, because it's been removed from the flow of the document. Add position:relative; and top:40px; to #container and see if that doesn't fix you up.

    Second question: set the line-height of the list items to the height of the whole nav, then add display:inline-block; and height:100%; to the anchors inside the list items.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member princeeternity's Avatar
    Join Date
    Jul 2014
    Location
    Jharkhand, India
    Posts
    15
    Member #
    39703
    Thanks. That solved my problems.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

navbar sticky top push content
,

position fixed push content down

,
push content below fixed div
,

push content below fixed header

Click on a term to search for related topics.

Tags for this Thread

All times are GMT -6. The time now is 12:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com