[Support request] Copyright-bar at the bottom-site and menu issues

[Rodrigo]

Hello Tom and Leo,

I’m updating a client’s site and I can’t figure to make the copyright-bar to stick at the bottom of website, so I can avoid pages where it shows exactly where the content area ends (for example: Contact page). What would be the CSS declaration for .copyright-bar?

This issue doesn’t happen on mobile. On contrary, it shows the copyright-bar right at the bottom of the website (without padding).

On the other hand, I need your help with some issues regarding menues style and behaviour, both on desktop and mobile:

How can I make a dropdown effect when open a submenu on sidebar? It should be permanently open only on hover and current page inside the submenu.

Slideout menu is not working at all. Whether at desktop or mobile, it doesn’t show the slide menu and it appear on the bottom of the site.

Page-header navigation colors are not working on mobile, neither. My website has custom navigation colors on the frontpage that doesn’t work on mobile.

Lastly, do you know what happens with the NextGen gallery plugin? On single-posts, it shows a huge blank space between the gallery and other Gutenberg’s blocks.

Thanks a lot in advance,
Rodrigo.

[Tom]

Hi there,

1. By default, the site footer is pushed down the page by the content. On pages with short content, it will appear higher up. It’s not really a great idea to force it to the bottom, but it is possible. You can try something like this:

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-footer {
    margin-top: auto;
}

2. What kind of effect are you wanting? I’m not too sure what you mean.

3. The slideout appearing at the bottom typically means there’s a javascript error on the page. I would need to see it happen to know for sure.

4. Color set in Page Headers (or Elements) won’t apply to opened mobile menus. Instead, you should set the colors for these inside the Customizer.

5. In my experience, NextGen Gallery is pretty buggy. Perhaps it isn’t compatible with Gutenberg?

[Rodrigo]

1. This worked well, but now another page its broken.

2. I want that menu does something like this website with the sidebar menu: http://www.carlosmartiel.net/es

3. I have activated the slideout menu so you can help me with that problem.

4. I set the colors for menu inside the Customizer, but there’s no option to set colors only to mobile menu. The thing is that page header has custom navigation colors, that doesn’t work on mobile. Is there a way I could do this with CSS?

5. I’ve heard that. I just want that my gallery have a pretty cool lightbox effect, and any plugin seems to work. Should I change to Smart Slider 3? I saw you recommended it before or do you suggest any other lightbox plugin?

[Tom]

1. That solution is easiest, but does have downfalls if the page structure isn’t consistent.

Here’s another solution:

#page {
    position: relative;
    min-height: 100vh;
    padding-bottom: 20px; /* height of your footer */
}

.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

2. Something like that would most likely require a custom javascript solution, unfortunately. There would need to be javascript attached to the click event of the parent item to add a class so it could reveal the sub-menu.

3. This is likely being caused by NextGen Gallery. One solution is to do this: https://generatepress.com/forums/topic/slideout-menu-on-bottom/#post-775732

4. The desktop colors of the navigation should be overwritten by your Page Header. So the colors in the Customizer would end up applying to mobile only.

Of course, you can use CSS as well:

@media (max-width: 768px) {
    .main-navigation,
    .main-navigation ul ul {
        background: #ffffff;
    }
}

5. This plugin is great and attaches itself to the default WordPress gallery: https://wordpress.org/plugins/wp-featherlight/

[Rodrigo]

1. Both solutions to the Copyright-bar didn’t worked out. The second solution do not break the site but doesn’t work in posts with higher content (the site-footer is fixed to the place in content area where it was without making scroll). Finally, I ended removing the CSS style cause is doesn’t cause any harm in Contact page (the other thing I though is to make a CSS rule just for that page, specifically).

2. I’ll work in a solution around this, with JS.

3. Problem solved deleting the NextGen Gallery plugin. Never liked it, anyways… 🙂

4. As the SlideOut menu works now, I just edited the colors of this menu and solved the problem.

5. Perfect plugin. It was what I was looking for. That way I could delete too NextGen in all of my websites that had it.

Thanks a lot!

[Tom]

No problem! Let me know if you end up needing more help with #1 🙂

[Rodrigo]

I am still fighting with that copyright-bar (site-footer) at the bottom of page.

I solved the dropdown-menu with this plugin: https://wordpress.org/plugins/jquery-vertical-accordion-menu/

The only problem I have now is a CSS effect on current menu-items (underline). Do you know how to apply that effect just to parent menu (not child-items). This is what I have done:

.current-menu-item {
text-decoration:line-through
}

[Tom]

Try this:

.main-nav > ul > li.current-menu-item {
    text-decoration:line-through
}

[Author]

Posts