CSS on footer menu is not responsive

I didn’t build the website someone else did actually and it’s an issue I noticed while freelancing for a client however:

dchained.com seems to overflow on the footer menu when you add another menu item, it looks like the theme was built with bootstrap?? It was implemented terribly. How can I make this more friendly and NOT overflow when I add more elements?

I tried to reduce the margin in the CSS, but did not solve my issue. You can see general styles on inspect element.

but this appears to be the CSS for the footer menu:

.home footer #newsPageContent{display: block;}
footer #newsPageContent{display: none;}
footer .footerSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 55px;/* margin-top: 55px;*/

footer .footerSection .footerLogo a {
    color: #000;

footer .footerSection .footerLogo a h5 {
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    margin: 0;

.footerMenu li a {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    color: #000;
    margin: 0 10px;
    padding: 0;

.footerSocial {
    list-style-type: none;
    display: flex;
    margin: 0;

.footerSocial li a {
    color: #5f2fd9;
    height: 35px;
    width: 35px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    -webkit-box-shadow: -1px 6px 26px -10px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: -1px 6px 26px -10px rgba(0, 0, 0, 0.75) !important;
    box-shadow: -1px 6px 26px -10px rgba(0, 0, 0, 0.75) !important;
    margin: 0 5px;
    font-size: 16px;

.footerSocial li a:hover {
    background: #5f2fd9;
    color: #fff !important;
    box-shadow: none !important;

.footerbg {
    background: #5f2fd9;
    height: 10px;
    border-radius: 20px 20px 0px 0px;

I am sure it’s something simple, but any help is appreciated.

Why are my custom fields not showing up in footer on page templates?

I have a custom field in my footer. On the home page the value shows up just fine, but on other page templates it doesn’t. I’m still pretty new to WP so I really am stuck here.

It’s this line here:

        <h3 class="text-white"><?php the_field("cta_field_title");?></h3>

If it works on the home page I assumed it would show up wherever else I call the footer. Any advice would be appreciated!


 * The template for displaying the footer

$nav_menu =
            'theme_location'    => 'footer',
            'sort_column'            => 'menu_order',
            'container'                => false,
            'echo'                        => '0',
            'depth'                        => 1,
            'menu_class'            => 'nav__list nav__list--footer'

$footer_bg = get_field('footer_background_image', 'options');
$footer_bg_opacity = get_field('footer_background_opacity', 'options');
$site_name = get_field('site_title', 'options');
$address = get_field('address', 'options');
$address_link = get_field('address_link', 'options');

<footer class="section section--footer">
    <div class="section--footer__header">
    <?php if( have_posts() ) : while ( have_posts() ) : the_post();?>
        <h3 class="text-white"><?php the_field("cta_field_title");?></h3>
<?php endwhile; endif;?>
    <form action="#" class="section--footer__form">
        <div class="section--footer__input-box center">
            <label for="name"></label>
            <input type="text" id="name" placeholder="name" class="input">
            <label for="email"></label>
            <input type="text" id="email" placeholder="email address" class="input">
        <div class="button__box center">
            <a href="#" class="button">Submit</a>
    <div class="section--footer__links">
        <?php wp_nav_menu(array(
            "theme_location" => "footer",
            "menu" => "desktop",
            "menu_class" => "section--footer__links"
        )) ?>
        <?php wp_nav_menu(array(
            "theme_location" => "social",
            "menu" => "desktop",
        )) ?>


<?php wp_footer() ?>


 * The page template file


if ( have_posts() ) : while ( have_posts() ) : the_post();

<h2><?php the_title();?></h2>
<p><?php the_content();?></p>


hooks – Remove Header and Footer if user is not logged on

Using Hook, is there a way to remove the Header and Footer from the specific page that is trying to access by users, if the current user is not logged on?

function footer_header_remove() {
    if(!is_user_logged_in() && is_page('the-page')){
       //Remove Header and Footer of "the-page"
add_action('???????????', 'footer_header_remove');

magento2.3 – magento2 call block to footer using xml

I have added a block to the footer but it is not on the side

enter image description here

This is my code in folder Magento_Theme/layout/default.xml

<referenceContainer name="footer-container">
        <block class="MagentoCmsBlockBlock" name="commercers-testing-footer" after="footer_links">
                <argument name="block_id" xsi:type="string">commercers-testing-footer</argument>

Please help me!

html – fixar o footer no fim da tela

estou com um pouco de dificuldade com o meu css, estou tentando fixar o rodapé no fim da tela, independente do conteúdo. se eu deixo o ele fixed o conteúdo no fim da <div class="container"> fica por baixo dele.
Estou usando o .conteiner {height: 80vh;} e .footer {height: 20vh;}. alguém saberia como posso resolver?

o melhor exemplo que achei foi a barrar de termos de serviços do Stack (aparece quando não esta logado)

inserir a descrição da imagem aqui

magento2.3 – Email header & footer( theme ) not set to custom email in magento 2?

I created a custom email with the following code.

public function SendEmail( $orderId, $shipping_label_path,$pdf_name ,$customer_name, $customerEmail )
    try {
        $sender_name = $this->scopeConfig->getValue('general/store_information/name',MagentoStoreModelScopeInterface::SCOPE_STORE);
        $sender_email = $this->scopeConfig->getValue('trans_email/ident_general/email',MagentoStoreModelScopeInterface::SCOPE_STORE);
        $sender = (
            'name' => $this->escaper->escapeHtml($sender_name),
            'email' => $this->escaper->escapeHtml($sender_email),
        $transport = $this->transportBuilder
                    'area' => MagentoFrameworkAppArea::AREA_FRONTEND,
                    'store' => MagentoStoreModelStore::DEFAULT_STORE_ID,
                'customer_name'  => $customer_name,
                'shipping_label'  => $shipping_label_path,
                'order_id' => $orderId
    } catch (Exception $e) {

The email template file looks like this.

<!--@subject Shipment label details for Order # {{var order_id}} @-->
{{template config_path="design/email/header_template"}}
<div class="ayakil-email-template">
<div class="ayakil-email-container">
    <p class="ayakil-title">{{trans "Dear"}} <strong>{{var customer_name|escape}}</strong>, </p>
    <p> Please find the shipment label to use when returning your items.</p>
    <p><a style="color: #0A246A" href="{{var shipping_label}}">{{trans "Shipping Label"}}</a> </p>
{{template config_path="design/email/footer_template"}}

My email_templates.xml file looks like this.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Email:etc/email_templates.xsd">
<template id="ayakil_email_label_template"
          label="Shipping label customer notification template"

Whenever email fired, The default header and footer picking in the email. Not the theme header & footer. How can I fix this?

beginner – Very simple semantic implementation of the structure of a web page with three elements: header, main, and footer, using Flexbox

I’m new to web development, and currently learning the basics of HTML and CSS. Many web pages follow the structural pattern of header, main, and footer; so I figured it’d be a good idea to try and implement this structure to see how things are carved.

This is my attempt:

body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  margin: 0;
  min-height: 100vh;

footer {
  background-color: dodgerblue;
  color: white;
  text-align: center;

main {
  background-color: snow;
  flex: 1;
  padding: 1rem;

footer {
  margin-top: auto;
<!DOCTYPE html>

<html lang="en">

  <link rel="stylesheet" href="main.css">
  <meta charset="UTF-8">


    <h2>Main content</h2>



I’m looking for all kinds of feedback, from style, to anti-patterns, ways to do things more concisely, and whatever other observation you can find useful. I do have some specific questions:

  1. Are the semantic HTML elements used correctly? There’s no need for an article element inside the main element, right?
  2. In the CSS I selected both header and footer for stuff that they have in common, is this good practice? Or should I keep a single header and a single footer selectors, separately? Could be more maintainable that way?
  3. Is this normally handled using Flexbox? Or is Grid display a better tool for this?
  4. What things would you do differently?

Thanks for your time!

wordpress.org – Bydefault header menu is taking footer menu as Id and displaying footer menu in header too

Here is my functions.php code

<?php register_nav_menus( array(
'primary' => __( 'Primary Menu', 'akeo-tech' ),  
'footer' => __('Footer Menu', 'akeo-tech'),
'mobile_header' => __('mobile-header', 'akeo-tech')) );
function get_footer_menus() {
$menu_name = 'footer'; // specify custom menu slug
if (($locations = get_nav_menu_locations()) && isset($locations($menu_name))) {
    $menu = wp_get_nav_menu_object($locations($menu_name));
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    $submenu = false;
    $count = 0;
    foreach ((array) $menu_items as $key => $menu_item) {
        $title = $menu_item->title;
        $url = $menu_item->url;
        if ( !$menu_item->menu_item_parent ) {
            $parent_id = $menu_item->ID;
            $menu_list .= '<div class="w-20"><h7 class="menu-header">'.$title.'</h7>' ."n";
        if ( $parent_id == $menu_item->menu_item_parent ) {
            if ( !$submenu ) {
                $submenu = true;
                $menu_list .= '<ul>' ."n";
            $menu_list .= '<li>' ."n";
            $menu_list .= '<a href="'.$url.'" >'.$title.'</a>' ."n";
            $menu_list .= '</li>' ."n";
            if ( $menu_items( $count + 1 )->menu_item_parent != $parent_id && $submenu ){
                $menu_list .= '</ul></div>' ."n";
                $submenu = false;
        if ( $menu_items( $count + 1 )->menu_item_parent != $parent_id ) {    
            $submenu = false;

    // $menu_list .= '</div>' ."n";
} else {
    // $menu_list = '<!-- no list defined -->';
echo $menu_list;}?>

Here is my header.php code

                            $args = array(
                                'menu' => 'mobile_header',
                                'menu_class' => 'desktop-navigation-links',
                                // 'menu_css_class' => 'dropdown',
                                'container' => 'nav',
                                'container_class' => '',
                                'depth' => 3

Here is my footer .php code

            if (function_exists('get_footer_menus')) {

But here in header menu too it is showing footer menu

theme development – how to change footer quick links menus(Primary menu) for certain pages

Need to change Footer quick links menu and footer tagline for certain pages only

we have working on School site it have both higher secondary school pages and nursery school pages if we click the link and open higher secondary the page have different Primary menu and nursery link has separate Menus

Here i need footer quick menu wants to be separate and i used conditional Menu plugins to achieve Separate Menu for ABC Higher secondary and XYZ Nursery.but it won’t works on Footer Quick menu so i need solutions from you guys.!!

Magento2.3.3 Exclude particular script from moving to footer

Magento2.3.3 I am using Magento default

Move JS code to the bottom of the page

to move js to bottom. But how can I exclude only 1 script.