I have a navbar-fixed-top menu for my page and it works exactly as I want it to. The project I am working on requires flat design on one page. This means I need to go from the menu to specific parts of the page. Everythin works but since the navbar is fixed on top it covers parts of the "subpage". See this image for two browser windows next to eachother.
Question: What alternatives do I have to push the page 80px upwards (preferably without JS).
On the bootstrap page it actually tells you that you will have to add some padding to the top of the body so that it doesn't cover your other content.
Try adding this to your CSS:
body { padding-top: 70px; }
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
I am building a website using Divi, and for a couple of the pages there is a requirement to have a sticky menu, along with a top title section combined as though they were one. Ideally I would like them to remain in their current position and simply scroll with the page without knocking out the formatting.
Code used so far is as follows:
.stickyheader{
position: sticky;
position: -webkit-sticky;
top: 55px;
}
#page-container{
overflow: visible !important;
}
I have tried naming both the title section and menu section with the class name 'stickyheader' in the hope that both would be lumped together. This does appear to make both elements scroll with the page, but the formatting goes out the window and they start overlapping and squashing up at the top of the screen, plus the space at the top of the title section has increased which throws the formatting out for the whole page, as everything has been adjusted to fit over the background image.
Both sections are global, for ease across all other pages as these two elements appear the same on each one.
Does anybody have any suggestions? Is there an easier way to do this?
Thanks in advance!
Sure thing, you can do that easily, making sure that you are using the latest Divi version which has the Theme Builder. With it, you can design a template which can govern a specific page and you can assign a fixed position to any element:
No need to use CSS. You can also take other approach:
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-fixed-header-with-divis-position-options
https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/
https://www.divithemeexamples.com/make-your-divi-4-0-header-sticky-or-fixed-with-the-theme-builder/
I have a fixed top navigation bar 100px deep on web page and links on that bar go to id's down the page. The id's are associated with the h3 heading for each section. Unfortunately on clicking the link the page moves up and the first 100px is hidden behind the fixed top bar.
I could possibly embed the id's elsewhere in the page roughly 100px higher than the point I'm linking to (not that easy given the quite graphical design). I wonder if anyone knows any way to force those id's to stop 100px short of the top of the page?
Unfortunately I have to keep the development site behind a maintenance screen so I can't provide a URL. Thanks in anticipation (my first post to StackOverflow!)
Jeremy
One solution is to use the :target pseudo class to shift your headings about a bit. The trick is to increase their top padding by the height of your fixed element and then move them back up the page by subtracting the same amount from their top margin.
So, using your example of a 100 pixel high fixed element and assuming no existing padding or margin on your h3 elements, here's how the CSS would look:
h3:target{
margin:-100px 0 0;
padding:100px;
}
You may want to tweak those values, depending on your design, to add a bit of space between the fixed element and your headings.
I've found the answer
You can see it at work at
http://www.sanclerorganic.com/wordpress
The link code on the navigation bar is
Recipes
and the target down the page is
<div style="position:relative;">
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div>
</div>
Obviously the -115px is adjusted to suite the top bar depth.
I hope this helps others.
Jeremy
I would like to be able to have a logo overhang from a header, see this link for a visual example. From what I've searched, most of the results are about making this happen with WordPress rather than just in terms of HTML/CSS (including the provided link). I'm using RoR alongside Twitter Bootstrap in order to create some quick styling of the page including the header (possibly pertinent information).
I'm guessing the answer to this question really is HTML/CSS-centric, so, if I had a header <div> that included a logo to the left as well as a set of navigation links to the right, how could I go about making that logo overhang into the rest of the page below?
Also, bonus points if the ability to add a slight shadow to the part that overhangs is included :)
You can use the z-index property (CSS) to set your logo image so that it is always in front, then you can position the image in your header and it will look like it's hanging. The slight shadow should be part of the image itself.
Try using css code with
position: absolute;
This will ensure your logo floats on top of wherever you want it. Then adjust how you want to place your logo image with:
margin-top: 100px;
using whatever px you want.
I've been trying to fix a problem with my nav bar on my website. If I move from the home page to the gallery page, the nav bar changes slightly (the navigation links move up by 2 pixels), and the bar seems to shift to the right, though I'm not sure why. The same happens when you move from the gallery page to the about page, only it doesn't shift to the right.
the URL is www.peach-designs.com. The code is really too big to post, but perhaps somebody could help me by looking using Firebug or Web Developer tool.
you can also change the class id wrapper in index.php
this will make index page to be same as the other pages
enter code here
#wrapper {
margin: auto;
width: 990px;
}
I'm assuming you want the navigation on each page to be in the same place it is on your home page (it's properly centered on that page). Also, I've only tested in Firefox (because you suggested using Firebug), where your site seems to work - in Chrome there are no images.
First, remove this from galleryStyle.css:
#wrapper {
height: 599px;
margin: auto;
width: 990px;
}
Then do this on gallery.html, news.html, about.html, and contact.php:
Move <div id="main"> to outside and before <div id="wrapper">, so it ends up like this:
Doing this centres your white overlay properly. At the moment, it's a bit too far to the right.
Your wrapper div on your gallery page is narrower than your home page (only 990px). Because it's occupying less space and being centered, your nav div is nudging to the right on the gallery page to occupy the smaller space of its parent div (wrapper) than the wider space of the home page. Try using consistent sizes and you'll run into these problems less.