Remove or move footer widget on just home page

Resolved nicolesage
(@nicolesage)

10 years ago

Hi again. Sorry for all the Saturday posts.

I’m trying to either remove the footer widgets from only the home page (‘front page template’) and not the other pages that use ‘default template’ or, ideally move them to the bottom of the page. There is not content on the home page except a full page background image, navigation and footer widgets. Since there is no content the footer widgets on the hope page are on top of the page right under the navigation.

Is this something I edit in the file ‘front-page.php’? I don’t want it to change on any of the other pages which uses ‘default template’ but I’m not sure which .php file is the default.

Is there anyway to achieve this? Changing behavior of the footer widget only on the home page and nowhere else.

Thank you!

Viewing 12 replies - 16 through 27 (of 27 total)

← 1 2

Theme Author Tomas Mackevicius
(@tomasm)

10 years ago
Try this:
```
footer#colophon {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
```
Thread Starter nicolesage
(@nicolesage)

10 years ago

So that works but it applies it to every single page. I was trying to make it work with just the home page since all the other pages have content so by making the footer absolute it overlaps with content on those other pages.

maybe something with bogy.home footer instead of footer#colophon?

That might not make sense, I’m still learning by experimenting.

Thread Starter nicolesage
(@nicolesage)

10 years ago

OK so I did:

body.home footer {
position: absolute;
bottom: 0px;
width: 100%;
}

which seems to be working except now on the mobil homepage it’s acting weird by overlapping footer onto the menu bar.

Theme Author Tomas Mackevicius
(@tomasm)

10 years ago

I suggest you start using style.css that is provided with child theme example. This way you will have better perspective where goes what, also you will be able to apply css rules only for certain media queries – they will affect only certain screen size. In this case you could add css rules just starting with 770px screen size.

Theme Author Tomas Mackevicius
(@tomasm)

10 years ago

BTW look at this too: http://themehybrid.com/plugins/restaurant

There are many plugins like that, but Justin Tadlock is WP super star, I always check plugins of such guys, because they do as it should be done.

This guy is also top dog from WP-Begginer: https://wordpress.org/plugins/restaurant-menu-manager/screenshots/

Check out his plugin too: https://wordpress.org/plugins/food-and-drink-menu/screenshots/ it has nice out of the box look, not tested, just looking at images

In terms of SEO take a look at this too: https://wordpress.org/plugins/recipe-schema/

Thread Starter nicolesage
(@nicolesage)

10 years ago

I am using a child’s theme and refer to the theme’s style sheet for help.

In changing the rule to the 770px media screen, would it be adding a padding to the top? or do I need to target the footer for this? Any tips on what direction to go would be greatly appreciated. Basically just on the home page of cell phone view I need to move the footer down so it does not overlap the menu.

Thank you for all your help this afternoon!

Thread Starter nicolesage
(@nicolesage)

10 years ago

Also thank you for all those links! I just saw that post.

Thread Starter nicolesage
(@nicolesage)

10 years ago

So I played with the below adding in just the ‘padding-top’ but it changes the padding on the view on the computer, not on the cell phone screen.

/* 12.1 Minimum width of 770 pixels */
@media screen and (min-width: 770px) {
/* Three footer widget areas */
#footer-widgets {
width: 100%;
border-top: none;
padding-top: 20%;
}
#footer-widgets.three #footer-widget-left {
float: left;
width: 30%;
padding-right: 2.3%;
padding-top: 20%;
}
#footer-widgets.three #footer-widget-middle {
float: left;
width: 30%;
padding-left: 2.5%;
padding-right: 2.3%;
padding-top: 20%;
}
#footer-widgets.three #footer-widget-right {
float: right;
width: 30%;
padding-left: 2.5%;
padding-top: 20%;

Am I at least in the right direction to adjust the footer on cell phone screens? Need it moved down slightly so it does not overlap the menu.

thank you!

Theme Author Tomas Mackevicius
(@tomasm)

10 years ago

Mobile screen is everything in the beginning. Media queries is everything going wider; min 770px, then min 960px. So if you want to move footer down just for the wide display, you can include it in 770px or 960px media query.

As far as I remember, default config for mobile view looks good without modifications.

Thread Starter nicolesage
(@nicolesage)

10 years ago

hmm OK. I guess I’m just having a hard time understanding why the footer now overlaps the menu when viewing on the cell phone screen. and then when I tap the menu and it drops down, then text from the footer is mixed in with the menu items. Trying to find out where along the lines I put something in my child’s theme to possibly cause this.

Thread Starter nicolesage
(@nicolesage)

10 years ago

Am I totally off by doing something like this (it fixed the overlapping problem on the cell phone but then on the computer the footer was back up in the middle of the screen:

body.home footer @media screen and (min-width: 770px) {
position: absolute;
bottom: 0px;
width: 100%;
}

I originally had just this (which worked for moving footer down on computer but caused it to overlap on cell phone):

body.home footer {
position: absolute;
bottom: 0px;
width: 100%;
}
Theme Author Tomas Mackevicius
(@tomasm)

10 years ago
You wrote css incorrectly. It should be:
```
@media screen and (min-width: 770px) {
	body.home footer {
		position: absolute;
		bottom: 0px;
		width: 100%;
	}
}
```

Viewing 12 replies - 16 through 27 (of 27 total)

← 1 2

The topic ‘Remove or move footer widget on just home page’ is closed to new replies.