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/
Related
When using a tumblr theme, I added an extra row for links, but the page won't automatically scroll. When changing the position to absolute, they scroll, but it doesn't show all the way, nor do the titles scroll. Can anyone help me out with this?
I'm not such what to change/add/remove to have the page scroll properly with the titles moving too.
The original code is here.
And here is the code once I added the last row.
The person who made the theme has deactivated their blog and their credit link leads to some odd site, so asking them for help isn't that easy considering I have no way of reaching them.
I suggest you go for a structure change. Currently because of position: absolute it is difficult to overflow the content in a standard way.
Ideally you should do the following
wrap the following series () in a parent
and style it to be on the right hand side and add the style
overflow: scroll to it.
remove the #columni {margin-left: 530px;} instead make it
display:inline-block;
remove the #columnsi{position: absolute;}
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
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.