Hi,
I am trying to built a chrome app and decided to use the theme SB Admin 2 for this purpose. I modified the theme to look something like what is show in the image above. The three boxes represents three bootstrap rows. I want row 3 to be fixed to the bottom of the page.Tried suggestions i got from stack overflow[added class "navbar-fixed-bottom" to the row], was able to get the row fixed to the bottom of the page but the footer was overflowing to the left side navigation bar.
What can be done to achieve this.
You can try setting the "left" for the footer. But without any code, we can't help you and we need to guess.
.footer
{
left: 200px; /* Use the width of your left menu */
}
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I'm trying to make my own toastr alert component and it's been going well using:
position: fixed;
bottom: 0px;
The problem arises when more than one is displayed at the same time because I want them to stack when there is more than 1 alert. How can I accomplish this?
I'm also using bootstrap 4 if that's of any help.
You could use a Div which uses the CSS properties you gave us in your original message.
In that div, you add divs (or spans, or p, whatever element) and the Div will automatically scale up to fit his content, yet will still be on the bottom of the page.
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
I am currently trying to get my footer menu to center and appear all on one line. Currently, it is on 2 lines for some reason.
The website is: http://museiam.ca/
I am trying to achieve this (image): http://museiam.ca/wp-content/uploads/LookBookPage_1.jpg
The theme I am using allows the option of 3 OR 4 widgets in the footer area. I currently have it set to 3. The menu itself is in one widget including the links Customer Care - Newsletter, where the Follow Us link is in another HTML text widget with all the social icons. I am trying to put everything on one line and centered like in the picture with equal padding.
I have tried to increase the widget of the menu width but to no success. Here is the CSS I tried:
.widget widget_nav_menu .menu-footer-1-container {
width: 800px !important;
}
I am open to any input or solution to achieve my desired look. I appreciate and thank you for all looking.
Look for this .container_12 .grid_4 and change the width to 100%
.container_12 .grid_4 {
width: 100%;
}
Also, you have another widget there which has an empty text post, remove that.
You are using 3 'grid_4' divs to fill 'container_12' parent div. What you need to do (from my perspective) is the following:
Use a single 'grid_12' div to wrap the menu, instead of dividing it into 3 'grid_4'.
Then, give menu UL 'align: center'
For centering li children do 'display: inline-block' on them (I think you already did this one).
I'm currently working on a CSS-based 3-column layout that has the following requirements:
On the desktop…
…all columns are shown.
On mobile devices…
…only the middle column is shown.
…the left column can slide in from the left, triggered by a swipe or a tap on a button.
…the right column can slide in from the right, triggered by a swipe or a tap on a button.
Independent of the device…
…the middle column contains three rows: The main header, a sub header, and the actual content.
…the main header scrolls away when scrolling down.
…the subheader is sticky on the top of the screen when scrolling down.
Now I tried to implement this:
Creating a 3-column layout and hiding the left and right columns is easy, using Bootstrap.
Having three rows in the middle column is easy, too.
To make the subheader sticky, I have two options:
Use position: sticky (best solution in technical terms, but not supported by any browser).
Use a script, attach to the scroll event and change to position: fixed on demand. This is what Bootstrap offers OOTB with its affix plugin. Using this plugin, it's an easy task, too.
Creating two sidebars and sliding them in is easy as well, using something such as Snap.js.
Problems start when I want to combine the sticky subheader with the sliding sidebars: The affix plugin simply stops working, and the subheader is not sticky any more. Basically, the problem comes down to issues with CSS transform and position: fixed, see Eric Meyer's awesome blog post on this and this answer.
One option to solve this could be to put the headers above the area where the sidebars slide in, so that they are not affected, but this is not what I want: I want the sidebar to push away everything.
How can I solve this? Is this possible at all?
Consider this post:
Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions
Bootstraps affix.js listens to the $(window).on('scroll'... event. Snap.js seems to change the scrollable element from the "window" element to the element where you added the "snap-content" class. I dont see any other solution as to write the sticky functionality provided by bootstrap yourself.
Use this as a reference. Based on your current scroll position (in pixels) you can add css attributes or even whole css classes to the element you want to make sticky:
jQuery(document).ready(function ($) {
$('.snap-content').scroll(function () {
if ($(this).scrollTop() > 140) {
if ($("#navbar").css('position') !== 'fixed') {
$("#navbar").css("position", "fixed");
}
} else {
if ($("#navbar").css('position') !== 'static') {
$("#navbar").css("position", "static");
}
}
});
});