I have set up some website using GitHub Pages and used the Leap Day theme. Here's the repository containing the theme's original source code and this is how the template looks in practice.
Since I wanted to customize my website more, I added a navigation bar from bootstrap at the top of the page. Afterwards, I adjusted margins and onsets of the Leap Day template code in order for the actual website's contents to start only below the fixed navigation bar (to avoid that the navigation bar overlaps the rest of the website). For that, I adjusted mainly this CSS file. Also in that file, I renamed the name of the original navigation bar that was present in the template already, and that is shown to the left of the website, to nav2. The custom (top-)navigation bar is called navi.
Well, after all, most of the website is running smoothly and does what it's supposed to do (presenting some project).
However, one problem has remained after the introduction of the additional top-navigation bar, namely that a click onto the name of a certain section or subsection of the currently shown website doesn't lead the user immediately to the start of the respective section any longer, but that what the user is going to see at the start of the actual website's content is somewhere below start of the requested section. As I understand it, the start of some section, e.g. Introduction, is moved to a certain height y on the website when the user clicks onto the Introduction-section's name in the left navigation bar. However, now that the additional navigation bar at the top has been added, such that all further contents have moved downwards, the position y, where the start of the section is shown, is hidden by some banner at the top of the page.
Therefore, I was wondering if anyone knows which of the many variables in the aforementioned css
file to change in order to move the point of onset of a section, y, further down on the website. I have tried changing a lot of parameters already, but I am unable to see which one controls the point I termed y.
To make my problem a bit clearer, please consider the following two images:
This is what is supposed to happen:
This is what actually happens:
Thank you very much in advance!
You could try some of the solutions listed in this StackOverflow question: Fixed page header overlaps in-page anchors.
The most common one appears to be adding padding-top to the a element equal to the height of the navigation bar.
Related
I am creating a website for my movie theatre. We are using a ticketing system that comes with our point of sale to offer sales online. The link is https://ticketing.useast.veezi.com/sessions/?siteToken=pxbww48zebzhba4e6yzr7f01am
I want to have this display on a page in wordpress. I don't want the scroll bar, and I want the height to fit the height of the linked content, without using a scrollbar. So if the website has 20 films with showtimes, I want the user to just scroll down on the webpage to access the info, without having a second scroll bar for the iframe.
I hope this makes sense. Also, I am hoping that there is a html snippet I can add to the page where I do not need to add code to the header to make it work. I don't want to screw around too much with the theme files themselves and this is only for one page. Thanks everyone!
I am building a blog website driven by Hexo. After I changed the font-size and resized the left panel, the vertical scrollbar contains some contents belong to the blog article contents when refresh the webpage every time. However, when I change to another web-tab(like wiki or something else) and back to the blog page tab, the scrollbar turns working normally.
I have no idea why this happened. And I am trying to fix this issue. The weird scrollbar capture is provided below. The pink element is scroll thumb and others are the elements should belong to blog article content.
I will appreciate if anything would be helpful.
Below are two simple HTML pages. You will notice that the header of the pages move when one browse from one page to the next. I can not seem to figure out why the header does not remain on the same place...
http://staging.serviceportal.com.au/service05/virgintest/landingPage.html
http://staging.serviceportal.com.au/service05/virgintest/thankyoupage1.html
Below is a screenshot of what I mean. One can notice the 5/10 pixel shift around the header region in both the pages.
I will like to know from where that shift is happening and how to fix this. Just to inform that these pages are responsive and built using Twitter BootStrap
I'd say the header moves because you have a scrollbar on the second screen, so the width of the screen is smaller, and the site moves accordingly.
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
I am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.