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 6 of 6
Like Tree2Likes
  • 1 Post By brandMatt
  • 1 Post By Vapr_Arts

Thread: Setting the page width with fixed left and right navigation

  1. #1
    Junior Member
    Join Date
    Nov 2015
    Posts
    3
    Member #
    52440

    Setting the page width with fixed left and right navigation

    Hi, I'm a begginer, and I'm trying to make a site with fixed navigation bar on the left side and on the right side.
    I'm using bootstrap in this example:

    A Pen by Kristijan


    I don't know how to set the page width and keep the page centered.
    I've tried without bootstrap, but I always end up with non fixed nav, or page width across the whole screen.
    I would appreciate if someone could help me and try to explain how to do it.

  2.  

  3. #2
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Set both a width and
    margin 0px auto to your container.
    Chris28 likes this.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  4. #3
    Junior Member
    Join Date
    Nov 2015
    Posts
    3
    Member #
    52440
    Thanks.
    And if I want width to be 1000px?
    Just setting the width to 1000px doesn't work.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    You want to set your container to something like this

    Code:
     
    
    .wrapper{
    width:100%;
    Max-width:1000px;
    Margin: 0px auto;
    }
    Wrapper will be the class name of a div that will contain everything on the page.

    I dont really understand by having fixed left n right navigation though. You want a nav to go down both sides of the page with content in the middle?


    Sent from my iPhone using Tapatalk
    brandMatt likes this.

  6. #5
    Junior Member
    Join Date
    Nov 2015
    Posts
    3
    Member #
    52440
    I've tried to what you said, it doesn't work. Maybe because I set position absolute for content?

    Yes, I want navigation to be fixed when I scroll, only content moving/scrolling. You can see it here:
    http://codepen.io/Chris28/pen/qOVXvG

  7. #6
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    I did this on my own website. The nav becomes fixed only when scrolling, and only after the user scrolls past a certain point. Here is a link to it:
    Web and Graphic Design St. Catharines | Brand Web Design

    Feel free to replicate it. I used some Jquery and CSS magic to get it working. Just inspect the various elements for the CSS and check out code.js for the Jquery. The scrollTo method is your best friend in this

    Yes, setting absolute positioning on your container would do it. Keep in mind when you set an absolute position on a container you should set it's parent to have relative positioning. Also the height of that absolutely positioned element's height no longer reflects the DOM's height.


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
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com