Joao Alves Marrucho Joao Alves Marrucho - 11 months ago 44
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 Source

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 -->