Here's my site in progress: http://www.modernfuture.net/wordpress
Here's my problem: When you click on a post, it takes you to the single post page (like it should). However the footer's stuck in the middle of the page (when it should be placed at the bottom)!
Here's what i've tried:
changing the "min-height" attribute to "height" in the .single class (the class that defines how a single post looks)
&
moving the class attribute from the footer tag to it's parent div.
None of which have worked successfully!
My question: Is there a way to get the footer to behave like it should on the single posts page without compromising the footer style on the main page?
Thanks in advance everyone! I'm totally stumped!
I would suggest fixing this with css. If you would like the footer to always be stuck to the bottom of the page, use position: absolute;, bottom 0px; If you would like to have the footer flow naturally, right below the content of the page, try using float: left;, clear: none;, position: relative;.
Related
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'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
So i built this website (using Angularjs) and for whatever reason, in one of the pages, the footer is keep floating no matter whatever i do.
You can see the issue here:
http://www.deliverightlogistics.com/howitworks
While if you go here, you see the footer positioned in the right place:
http://www.deliverightlogistics.com/ourprocess
The weird part is that given that they both generated into the same Angular content (ng-view), i can't find the reason why i have this issue in one page and not the other.
Keep in mind that I would need a change that would fix the problem but not causing other pages' footer to 'misbehave'.
Thx
This isn't an Angular issue, but a CSS one. In your style.css, you have both #howitworks_second and #howitworks_second article positioned absolutely. Take those declarations out, add a clear: both; to the footer, and your footer pops back to the bottom.
The content of the main article on my site changes dynamically with AJAX. I want to add a footer to the site but because I can't set a static height the footer always appears at the same position as the article (as if the article didn't take up any space at all in the DOM).
I guess the easiest way is to show visually what happens: my site here
If you look at the footer when the page loads you'll notice it's stuck behing the article.
Delete this line for #mainSection .mainArticle:
position: absolute;
Absolute positioning takes your article out of the flow, deleting this line will make its positioning static, and this will make those elements on top of each other as intended.
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.