Joao Alves Marrucho Joao Alves Marrucho - 1 month ago 6
CSS Question

Adjusting flex Footer position (with "translatedY" child elements) on a responsive website

I am trying to make a sticky footer with these premises:


  • footer is position:fixed;

  • its global height changes according to:


    • how many child .sub-menu items the user adds (may vary)

    • the media queries (that change the font-size)

    • the font-size (which is attributed in viewport units "vw")




There are two specific media instances that change the font size:


  • one media query for devices/screens bellow 980px

  • and one for devices/screens above 1550px



I am trying to position the footer always on the bottom of the page while focing its child elements to appear above it. However the number of .sub-menu items is forcing the footer to grow in height; as if that wasn't enough the viewport width is changing the font size, which also affect the height of the element.


h1 {
font-size: 4vw;
letter-spacing: 0.02em;
}
h2, h3, ul.sub-menu {
font-size:2.3vw;
line-height: 1.4em;
color: black;
}

.footermenu {
bottom:0vh;
left:0vw;
position: fixed;
width: 95vw;
padding-right: 5vw;
height: 55vh; /*this seems to help but it is not reliable enough*/
z-index:999;
}

.footermenu ul {
justify-content: space-between;
display: flex;
}

.menu-item > ul.sub-menu {
padding: 1vh;
text-align: center;
flex-direction: column;
opacity: 1;
transition: 0.5s ease-out;
}

.menu > .menu-item:not(:first-child):not(:last-child), .menu-item:not(:first-child):not(:last-child) > ul.sub-menu {
text-align: center !important;
flex: 0 1 33%;
-webkit-flex: 0 1 33%;
}

.menu > .menu-item:first-child, .menu-item:first-child > ul.sub-menu {
text-align: left !important;
flex: 0 1 33%;
-webkit-flex: 0 1 33%;
}

.menu > .menu-item:last-child, .menu-item:last-child > ul.sub-menu {
text-align: right !important;
flex: 0 1 33%;
-webkit-flex: 0 1 33%;
}

/* from here on I am translating the sub-menu items up */

.footermenu .menu-item:not(:first-child):not(:last-child) > ul.sub-menu {
-webkit-transform: translateY(calc(-100% - 15vh));
transform: translateY(calc(-100% - 15vh));
}

.footermenu .menu-item:first-child > ul.sub-menu {
-webkit-transform: translateY(calc(-100% - 15vh));
transform: translateY(calc(-100% - 15vh));
}

.footermenu .menu-item:last-child > ul.sub-menu {
-webkit-transform: translateY(calc(-100% - 15vh));
transform: translateY(calc(-100% - 15vh));
}

@media screen and (max-width: 980px) {
h1 {
font-size:6vw;
letter-spacing: 0.02em;
}
h2, h3, ul.sub-menu a {
font-size:3.6vw;
line-height: 1.2em;
color: black;
}


#content {
margin: auto;
width: 68vw
margin-top: 25vh;
}

}
@media screen and (min-width: 1550px) {
h1 {
font-size:3.5vw;
letter-spacing: 0.02em;
}
h2, h3, ul.sub-menu a {
font-size:2.3vw;
line-height: 1.2em;
color: black;
}
.post .entry-content {
margin-top: 1.5em;
text-align:left;
-webkit-column-count:1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
.footermenu {
z-index:999;
height: 18vh!important; /*I am trying to fix the problem like this but as said before this is not safe */
}
.post .entry-content {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
#content {
margin: auto;
width: 68vw;
margin-top: 25vh;
}
}

<div id="footer">
<h1>
<div class="footermenu">
<ul id="menu-footer-menu" class="menu">
<li class="menu-item"><a href="url_4">Contact</a>
<ul class="sub-menu">
<li class="menu-item"><a href="url_6_a">More Landscapes</a></li>
<li class="menu-item"><a href="url_6_b">Collection</a></li></ul>
</li>
<li class="menu-item"><a href="url_5">Links</a>
<ul class="sub-menu">
<li class="menu-item"><a href="url_6_a">More Landscapes</a></li>
<li class="menu-item"><a href="url_6_b">Collection</a></li>
<li class="menu-item"><a href="url_6_c">Brave New</a></li>
<li class="menu-item"><a href="url_6_d">Line Three</a></li>
<li class="menu-item"><a href="url_6_e">Mary's World</a></li>
</ul>
</li>
<li class="menu-item"><a href="url_6">About</a>
<ul class="sub-menu">
<li class="menu-item"><a href="url_6_a">More Landscapes</a></li>
<li class="menu-item"><a href="url_6_b">Collection</a></li>
<li class="menu-item"><a href="url_6_c">Brave New</a></li>
<li class="menu-item"><a href="url_6_d">Line Three</a></li>
<li class="menu-item"><a href="url_6_e">Mary's World</a></li>
</ul>
</li>
</ul>
</div>
</h1>
</div><!-- end of #footer -->





Would you be able to help me place this footer always on the same position, regardless on the number of sum-menu items, viewport dimensions and font-size?

A php approach for wordpress engine is also welcome.
So in summary:
I am trying to change the html order of my footer menu in such a way the parent menu item appears after its children. I have done it using CSS "transform: translateY(n)" however this does not solve my problem completely because this method has way too many variables.
Many thanks.

Answer

Without getting into the specifics of your very detailed requirements, what I think you are essentially wanting the menus to be is botton-up.

Since you are using flexbox this is just a matter of using flex-direction:column-reverse.

A general example.

* {
  margin: 0;
  padding: 0;
}
a {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
}
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: pink;
}
.footermenu {
  display: flex;
  justify-content: space-between;
}
.footermenu #menu-footer-menu {
  display: flex;
  flex: 1;
  justify-content: space-around;
  text-align: center;
}
#menu-footer-menu > li > a {
  color: red;
}
.menu-item {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
}
<div id="footer">
  <div class="footermenu">
    <ul id="menu-footer-menu" class="menu">
      <li class="menu-item"><a href="url_4">Contact</a>

        <ul class="sub-menu">
          <li class="menu-item"><a href="url_6_a">More  Landscapes</a>
          </li>
          <li class="menu-item"><a href="url_6_b">Collection</a>
          </li>
        </ul>
      </li>

      <li class="menu-item"><a href="url_5">Links</a>

        <ul class="sub-menu">
          <li class="menu-item"><a href="url_6_a">More Landscapes</a>
          </li>
          <li class="menu-item"><a href="url_6_b">Collection</a>
          </li>
          <li class="menu-item"><a href="url_6_c">Brave New</a>
          </li>
          <li class="menu-item"><a href="url_6_d">Line Three</a>
          </li>
          <li class="menu-item"><a href="url_6_e">Mary's World</a>
          </li>
        </ul>
      </li>
      <li class="menu-item"><a href="url_6">About</a>
        <ul class="sub-menu">
          <li class="menu-item"><a href="url_6_a">More  Landscapes</a>
          </li>
          <li class="menu-item"><a href="url_6_b">Collection</a>
          </li>
          <li class="menu-item"><a href="url_6_c">Brave New</a>
          </li>
          <li class="menu-item"><a href="url_6_d">Line Three</a>
          </li>
          <li class="menu-item"><a href="url_6_e">Mary's World</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!-- end of #footer -->

Comments