Help docking fixed nav bar to top on scroll

Help docking fixed nav bar to top on scroll
Hello,
I'm trying to get a nav bar that is positioned in the middle of a page to "dock" with the top of the browser when it is scrolled to, and undock when the browser is scrolled back up past it.
An example of this can be seen on http://lesscss.org.
Is there any way to do this in Muse?
Thanks for your help / suggestions.

I am familiar with the pinning feature.
I would like the user to be able to scroll down the page and once the nav bar that was once in the middle of the page is at the top, for it to dock or pin then. And when the user scrolls back to the top the nav bar will return to the middle of the page.
If you wouldn't mind taking a closer look at http://lesscss.org there is an example of exactly what I am talking about. The navigation bar is in the middle of the page and it doesn't pin until the user scrolls to the top.
Thanks!

Similar Messages

  • Fixed Nav Bar, Fixed Sidebar, Scroll Main Content

    Can someone direct me to some good documentation to learn how to design a page to have a fixed nav bar, fixed sidebar and main content that scrolls?
    My objective is to have the nav bar/sidebar visible at all times when the user is scrolling through the main content.
    Thanks.

    On line 135, you have this:
    <td align="left"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
                        hspace="15" vspace="5" border="1" align="left" />
    Try this:
    <td align="left"> <div style="overflow:auto; height: 200px"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
                        hspace="15" vspace="5" border="1" />
    Don't forget to close the division right before the cell closure.
    </div>
    </td>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • IWeb update does not fix nav bar problem

    The subject says it. Downloaded 2.0.1 with hope, republished and uploaded pages, but nav bar still does not appear. Only black dot. Wish I could revert to previous version.

    I don't know if this will solve your problem but I had the exact same experience. I have a site which I publish to a folder and then use transmit to ftp to a server. I also have the same site published to .mac. The black dot problem was only affecting the non.mac site. After iWeb 08 update I noticed a scripts folder and a feed.xml file in the site folder which I'm sure wasn't there before??? When I uploaded this folder and file as well as the index.html file it solved my problem. I'm no expert and I'm not sure why!!! but it might help...

  • Help with building nav bar in DW cs3

    Is it possible to turn text into linkable buttons in DW cs3?
    I have built a nav panel by inserting a table.
    I then typed in my menu options.
    Can i now turn these into links that can be used to navigate
    my site?
    Any help would be greatly appreciated.

    Hello Deafpilot01,
    I'm sorry but you have the wrong forum for your question.
    This forum is about Adobe Presenter, not Dreamweaver. You might
    want to try your question in the Dreamweaver forum.

  • How can I fix nav bar that wraps to next line, leaving big gap?

    I have 2 lines of menu items in the navigation bar (Formal theme) when I'm in iWeb, but it wraps to 3 lines in various browsers, leaving a big gap at the end of the 1st and 2nd line where a short menu item could easily fit. Here's an example:
    http://www.redcottageinc.com/redcottageinc/holiday/holiday.html
    The menu item "Links" could easily fit on the previous line. Thanks for your help.

    Have you tried clicking of the navbar object and enlarging the window by dragging? You could also resize the page size to the Apple suggested 980 pixels which is what the iPhone uses. Then you could resize the navbar object to get the appearance you want.
    OT

  • Help please with nav bar!!

    Please could somebody help me?! I am still new to Dreamweaver and im changing my spry menu bar to something that will work properly on other devices BUT ive replaced the menu bar with a pure css menu bar which is now working great on other devices except now when clicking on any of the buttons a new window is opened rather than the button just navigating to that page. How can i make it open other pages on the same window?
    Ive only applied the new menu bar to the index page - www.milesfunerals.com

    I'm not seeing what you describe in Firefox or IE on Windows7 or on my iPhone.
    Did you already repair this, or am I missing something?
    Each link I click on in all of the browsers mentioned brings me to the page as expected. No new window or tab is being opened.

  • Won't maximize from Dock. Only brings up function bar on top

    I've read the problems on Windows systems, but I do not see a fix for Mac.
    Running the latest Mac OS X 10.8.3 and Firefox 19.0.2
    When I ALT-TAB to FF from any other program while previously minimized FF to the Dock, the tool bar on top of the screen appears, but the full screen window does not.

    Is there any way to drag the lower right corner to expand the window?
    If not, you could rename the file that stores your window size/position and toolbar customization data.
    Open your current Firefox settings (AKA Firefox profile) folder using
    Help > Troubleshooting Information > "Show Folder" button
    Switch back to Firefox and Exit
    Pause while Firefox finishes its cleanup, then rename '''localstore.rdf''' to something like localstore.old
    Restart Firefox. Hopefully now things will be back to normal.

  • Airplay icon lost on macbook pro in nav bar

    I have seem to have lost the icon for airplay in my nav bar on top of my screen, and now I cannot get my screen via apple tv3 on my tv... please help... thanks!

    Hi Harry,
    If you are having issues with the AirPlay icon showing, you may want to take a look at the troubleshooting in the following article:
    Apple Support: Troubleshooting AirPlay and AirPlay Mirroring
    http://support.apple.com/kb/ts4215
    Cheers,
    - Brenden

  • Autorotation w/ Tab and Nav Bars

    I am having a problem with views not being properly resized after autorotation. My app has a tab bar where one of the tabs is nav controller. I have the autoresize masks to maintain edge distances and use flexible width/height.
    Starting in portrait, if I switch to the tab with the nav controller and then rotate the device to landscape, the content view does not resize properly. Once the rotation animation stops, the top of the content view ends up obscured by the nav bar (it looks like the content view is being sized to fit between the top screen edge and the top of the tab bar rather than fitting between the bottom of the nav bar and top of the tab bar). The horizontal dimension updates as expected.
    If I start in landscape and then switch over to the tab with the nav controller, the content view does correctly sit between the nav and tab bars.
    I dumped the frame/bounds of the content to see if something jumped out at me and am only more confused. In both cases, the frame and bounds of the content view are origin at (0, 0), width 480, height 239? I was expecting to see the origin offset in the first case where things don't resize correctly.
    Not sure what I am doing wrong...
    tw

    Hello,
    The answer is in the code. Can you post a link?
    As a guess, the fix might be in setting the cell the
    navigation is in to
    vertical-align: top;
    In design view, click in the cell that contains the
    navigation.
    Select the <td> tag in the tag bar at the bottom of the
    design window.
    The entire column containing the navigation should highlight.
    In the properties window, select "Top" from the "vert"
    dropdown choices.
    In code view, find the cell containing the navigation.
    Change the opening <td> to:
    <td valign="top">
    It really depends on how you built it. This could also be
    caused by merged
    table rows.
    Take care,
    Tim
    "kahnman7" <[email protected]> wrote in
    message
    news:gnkape$kb9$[email protected]..
    > Hi,
    >
    > REWARD OFFERED FOR THE RIGHT ANSWER THAT I CAN ACTUALLY
    IMPLEMENT! :-)
    >
    > Because DW doesn't let me place more than one "official"
    nav bar on a
    > page, I
    > have created nav bars for sub-sections of my site by
    creating a simple
    > single-column table and placing rollover images in it
    for the buttons.
    >
    > I have this nav bar placed on the left-hand side of my
    pages. Each page is
    > a
    > two-column table -- nav bars in the left-hand column,
    content in the
    > right-hand
    > column. So basically nested within the left-hand column
    is my single
    > column nav
    > bar.
    >
    > When the page content in the right-hand column is long,
    the nav bar in the
    > left-hand column drops down to near the bottom of the
    page, but I want it
    > to
    > remain at the top. How can I make it remain in this
    fixed location other
    > than
    > inserting lots of carriage returns in the left column? I
    would prefer a
    > more
    > proper, dare I say "elegant," solution for it to remain
    in place.
    >
    > Thanks! And the reward... a copy of my rock band's new
    CD, due out in 3
    > weeks.
    > It's great stuff produced by an industry legend. :-)
    >
    > Scott
    >
    >
    >

  • Dreamweaver help! creating navigation bar?

    how do i create a navigation bar. my dreamweaver help says a
    nav bar has a up. down and over image but doesn't actually tell me
    where to get this image or how to create it??
    if this is going to be too complex i don't mind just having
    my nav bars as text link but can't seem to spread my 7 links out
    horizontally as i can only have two space bar in between each text?

    You and me both my friend! I just got off the phone with
    "tech support" trying to pay for a single incident ($35) so they
    could walk me through putting a navigation bar on my website. It's
    so frustrting dealing with some of these techs. I don't want to be
    politically incorrect here, but I always wind up with someone I can
    hardly understand ( accent ). This stuff is hard enough to follow
    with a language barrier. Then I called in to tech support, they
    told me I had to pay that I was out of complitmentary assistance,
    so they transferred me to sales, who after speaking to two more
    people I had trouble understanding, I was transferred back to tech.
    support who asked me if I had paid for a plan! Then she says she
    can take the credit card etc., when I got through with that she
    tells me that she can't walk me through putting the nav. bar
    directly on my web site, that I'll have to open a new page and to a
    sample one. ( which means when I finish I'll have to remember all
    the steps and try to duplicate it on my own site. ( you know how
    that goes! ) It's infuriating. I wound up spending an hour and got
    nothing, they couldn't even just charge my card so I'd have credit
    toward one call later. ( I had to go after dealing with this for 45
    minutes)
    Anyway, You have to go to Firefox or maybe photoshop to
    create the background image. I did some in Firefox, but for the
    page background, not the nav. bar. You would open a new page, put
    in the size ( pixels ) you need, then use the rectangle tool to
    outline that which selects it. Then you can go to the bottom of the
    screen and select the color and gradient tool to create some cool
    color effects. The thing I don't know is how to know exactly what
    size your navigation bar is going to be ahead of time so to size it
    right. I understand it has to be exact. This tech told me that they
    can't help with any "design issues", like color, where it goes in
    your website, etc. If they talk you through how to do it on a blank
    page and then you have trouble on your real website, well that's
    another issue and another $35. But I don't even understand if they
    will help you on the real website. NIGHTMARE!!!!

  • The nav bars are too sensitive and interfere with page navigation

    Seems to me it would be far better if the nav bars at top and bottom (chrome) were activated with a two-finger touch. The things pop up at the least touch. They should be secondary to swiping, tapping to activate pan and zooms, etc.
    I'm refering to the behavior within the Content Viewer on the iPad.

    Completely agree.  A settings page where navigation can be tweaked - with a default set at two finger tap - would be great.  The nav constantly popping up really interrupts the reading flow.

  • Enkitec Nav bar plugin

    Hi,
    I need help with Enkitec Nav bar plugin, I have installed  and created list and region, How can I get rid of the second menu bar? so as to have just one menu bar and the drop down  I created.
    This is the application URL:  http://apex.oracle.com/pls/apex/f?p=9678:1:101531257071981
    Thanks

    Ok, I've looked and yes, you have the original APEX tabs and the new plugin Nav Bar showing on the page.  To remove the original APEX tabs, edit the page attributes and remove the the "Standard Tab Set" attribute.  There are other ways to do that too, like changing the page template or deleting all the tabs.
    Also, the placement of the Nav Bar is not correct.  You're using Theme 26, so place the Nav Bar in "Region Position 8".  That will move it to the right spot.
    For the override CSS, there are a few options.  The file can get uploaded to the the Shared Components -> Cascading Stylesheets
    Then to reference it you use #WORKSPACE_IMAGES#enkitec-navbar-override.css  (if you specify the file is global to the workspace) or #APP_IMAGES#enkitec-navbar-override.css if you make it specific to the App.
    The use that reference in the template or from a region on the Global Page (Page Zero).
    Thanks
    -Jorge

  • I have created a site with iWeb. I have replaced the iWeb Nav bar with a vertical one I made myself. Problem is, my top button disables itself if it overlaps into the "hidden" nav bar area. I can cmd click and drag it into this area, but then all the rest

    I have created a site with iWeb. I have replaced the iWeb Nav bar with a vertical one I made myself. Problem is, my top button disables itself (and the animation doesn't work) if it overlaps into the "hidden" nav bar area (indicated by a blue rectangle). I can cmd click and drag it into this area, but then all the rest of my site is pushed down the page. Don't know what to do about this. I don't know how to bring the rest of the page up without dragging it also into the designated nav bar area. Also, by doing this, is it affecting my site in ant way? see my site here at www.steveburrowsimages.com
    The home page is with it all draged into the nav bar area and the about page is with is outside the nav bar area (notice that the top button does not animate or work as a button.
    Getting confused here. Anyone got any ideas?

    Well, you made a good start with SEO by getting rid of the iWeb default navigation since it doesn't help the spiders and, out there in the real world, there are more people than you would think with javascript turned off in their browsers.
    One of the downsides of iWeb is that it doesn't allow for the alt attribute in the img tag. Its well worth adding these to give you extra keywords even if you have captioned all your images. Use iWeb SEO Tool for this...
    http://www.iwebformusicians.com/Search-Engine-Optimization/Tags.html
    iWeb, just like most drag and drop software, creates a huge amount of code which causes the pages to load slowly in the browser. Running you files through an optimizer will help to reduce this problem and further reduce the size of image files even beyond the initial optimization you do before loading them into iWeb...
    http://www.iwebformusicians.com/Search-Engine-Optimization/Optimize.html

  • Can You Help with an iWeb Nav Bar Not Displaying Problem?

    Hi Everyone,
    I have had a website that I created with iWeb and have successfully hosted with me.com (Mobile Me) for the past 8 months. I added a new page yesterday and ever since then, the Nav Bar has stopped appearing on any browser. This happens on every page of my site where there should be a Nav Bar.
    I brought up the Safari "Activity" window and when I load one of my pages in, error messages pop up that may hold the clue for someone helping out. (I'm not sure if this has anything to do with the problem.)
    All the "http://..." components (not shown) load in okay, but the following "https://..." components below are followed by a "bad server certificate" error message.
    https://www.me.com/st/1/sharedassets/2.0.4/Common/Scripts/Site/iWebImage.js
    https://www.me.com/st/1/sharedassets/2.0.4/Common/Scripts/Site/iWebSite.js
    https://www.me.com/st/1/sharedassets/2.0.4/Common/Templates/Layered%20Paper/Laye redPaper_01.jpg
    https://www.me.com/st/1/sharedassets/2.0.4/Common/Templates/Layered%20Paper/Laye redPaper_04.jpg
    No, I haven't tried deleting the page I created yesterday. I'm quite proud of it and would hate to can it. I will, if I have to, but before then, I was hoping someone else familiar with this problem had a solution they could share.
    Thanks.

    Hello
    I am having the same problem. I have had my website with mobile me for nearly 2 years and have never had a problem.
    However my Nav Bar has disappeared on the published website. When I go into iWeb it is there. I have made some changes and republished it - a few times - and when live you can only get to the Home page, there is just a dot where all the other pages used to list.
    I brought up the Safari Activity window and it tells me that only 13 of 15 items are there. It doesn't show any other errors.
    I would love some help on how to fix it.
    Thanks
    http://www.allthingsslimey.com.au

  • Help centering text in horizontal Nav bar

    I have just built my styles for my Nav bar and i am trying to figure out how to place everything centered in the div.
    at the moment they are offset to the left. Fairly new to this.
    here is my CSS code and underneath the HTML
    Thanks so much for any help you can give me
    J
    ul.nav {
        background-color: #FFF;
        padding-left: 15px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-bottom-color: #ababab;
        border-top-color: #afafaf;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        text-decoration: none;
        color: #666;
        line-height: 2.5;
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #ababab;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        color: #09F;
        background-color: #FFF;
    ul.nav li {
        display: inline;
    /* ~~ The footer styles ~~ */
    .footer {
        padding: 10px 0;
        background: #CCC49F;
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ Miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
      </div>
    <div id="navbar">
    <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Articles</a>
    </li>
    <li><a href="#">Archives</a>
    <li><a href="#">Local Reporter</a>
    </li><li><a href="#">Sign up</a>
    </li><li><a href="#">Contact Us</a></li></ul>
    </div>
    Thanks again!

    ahh sorry...here you go
    ul.nav {
         background-color: #FFF;
         padding-left: 15px;
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-top-style: solid;
         border-bottom-style: solid;
         border-bottom-color: #ababab;
         border-top-color: #afafaf;
         width: 960px;
         margin-right: auto;
         margin-left: auto;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
         text-decoration: none;
         color: #666;
         line-height: 2.5;
         display: inline-block;
         padding-right: 15px;
         padding-left: 15px;
         border-right-width: 1px;
         border-right-style: solid;
         border-right-color: #ababab;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
         color: #09F;
         background-color: #FFF;
    ul.nav li
    /* ~~ The footer styles ~~ */
    .footer
    .weather
    #weather sidebar1
    /* ~~ Miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
         float: right;
         margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
         float: left;
         margin-right: 8px;
    .clearfloat { /* this class can be placed on a
    or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
         clear:both;
         height:0;
         font-size: 1px;
         line-height: 0px;
    #apDiv1
    -->
    </style></head>

Maybe you are looking for