Modifying footer flex position with translatedY child elements for a dynamic website layout

My goal is to create a sticky footer with specific requirements:

  • The footer should have position:fixed;
  • Its height should adjust based on:
    • The number of child .sub-menu items added by the user (which can vary)
    • The changes in font-size due to media queries and viewport units "vw"

There are two media query instances that affect the font size:

  • One for devices/screens below 980px
  • Another for devices/screens above 1550px

I want the footer to always be at the bottom of the page while ensuring its child elements appear above it. However, as the number of .sub-menu items increases, the footer's height grows accordingly. Additionally, changes in font size due to viewport width also impact the element's height.

[CSS code here]

Can anyone help me keep the footer in a fixed position regardless of the .sub-menu items, viewport dimensions, and font-size? Any PHP-based solution for WordPress would also be appreciated.

To summarize, I'm looking to rearrange my footer menu HTML so that parent menu items come after their children. While CSS transformations like "translateY(n)" have helped achieve this partially, they introduce too many variables. Thank you!

htmlcssflexboxparent-childviewport-units

Answer №1

Without delving deep into the specifics of your intricate requirements, it appears that what you are essentially aiming for in the menus is a bottom-up approach.

Given that you are utilizing flexbox, achieving this is as simple as using flex-direction:column-reverse.

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

Answer №2

I believe we can achieve the desired result without using transform in this case. Placing the sub-menu ul code before the main menu header <a> tag for footer menus should work just fine. There is no need to specify a height in menu-footer-menu, and each main menu li should be set to position:absolute individually to ensure it stays at the bottom.

I have made some modifications to your code that I think will meet your requirements. You can view the updated version here:

http://codepen.io/Nasir_T/pen/jModxK

I hope this solution makes sense to you. Please feel free to reach out if you require further assistance.

P.S. I believe I may have helped you with fixing the menu alignments for left, center, and right in a previous question. Am I correct? :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Safari displaying elements without following font styling specified in CSS

I have a select element in my web page, and I've customized the font using CSS: @font-face { font-family: myFont; src: url('myFont.woff'); } body select{ font-family: myFont; } After testing in Chro ...

htmlcssfontssafari

Issue with Carousel Slide in BootStrap 5.0 beta 1: Unable to function properly

Why won't my carousel slide properly? It just switches to the next item without any sliding transition. I've read through Bootstrap 5 documentation, but it doesn't work there either. Has the slide transition feature been removed? HTML: < ...

htmlcssbootstrap-5

Internet Explorer 11 displays a white X instead of the image

While developing a Single Page Application on Angular 1.5, I encountered a frustrating bug in IE11. Instead of rendering my pictures correctly, I see a white X in a black box. Strangely, the browser is receiving a 200 code response for the image request. C ...

javascripthtmlangularjscross-browser

How can I implement a Mouse Over event listener for a FlexTable in GWT 1.7?

What is the best method to attach an event listener or handler to widgets in GWT 1.7? I have looked at similar questions on SO, but they appear to be outdated. How can I add a Hover listener to a FlexTable, disregarding the existing :hover in CSS? ...

javahtmlgwtevent-handling

What is the best way to create a sticky/fixed navbar that conceals the div above it while scrolling on the page?

When I am at the top of the page, I want to display the phone number and email above the navigation bar. However, as soon as I start scrolling down, I want the phone number and email to disappear and only show the navigation bar. I have attempted using fix ...

htmlcssbootstrap-4

When a user clicks on buttons other than the submit button, the input field redirects to another page

A helpful user named Vittore assisted me in displaying the first 5 list items of the unordered list and implementing page navigation with next and previous buttons flawlessly. The issue arises with an input field, which functions correctly by navigating ...

javascriptjqueryhtml

SQL update query executed through PHP will only modify the value in the first row

I have encountered an issue with my script. I have a table where I retrieve values from a database and display them in an HTML table using PHP. Additionally, I have JavaScript code that displays an HTML form below each row of the table. One important note ...

phpjqueryhtmlsqlajax

What could be causing the background of the wrapper image not to display?

I am looking to add a background image specifically within the wrapper div on my website. Below is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="<?php bloginfo('charset'); ?>"> &l ...

htmlcsswordpress

Tips for adjusting image size in Bootstrap carousel

Is it possible to change the width of the image in this carousel? How can I resize the image without affecting the red box? I've tried numerous solutions on various forums, but none seem to work. The image just won't shrink the way I want it to ...

htmlcssbootstrap-4carousel

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

Several ways to display images with interactive captions

I am in need of multiple image modals with different descriptions. Each image should have a unique caption that appears when clicked. I have searched for solutions that display alt text for each image, but I require it to show other specific texts upon cli ...

javascripthtmlcssbootstrap-4

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

javascripthtmlangulartypescript

What steps can I take to improve the design of this layout created using Twitter Bootstrap?

Currently, I am designing a sample form layout using Twitter Bootstrap. The form displays fields horizontally, with a link between each field. My goal is to have bullet points appear on the right side of the fields when the link is clicked. However, the al ...

htmlcsstwitter-bootstrap

Utilizing Angular PrimeNG's range datepicker, you can select a date range spanning from January 31st to December 1st, 2023 within a reactive form. Take it a step further by calculating

Here is some HTML code: <div class="row"> <div class="col-4"> <p-calendar label="startDate" formControlName="startDate" [minDate]="daMaxRange" ...

javascripthtmlangulartypescriptdate-range

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

Eliminate the use of burger icons in a theme inspired by the

Is there a way to eliminate the burger menus in the "Eighties" Wordpress theme and substitute it with a classic navigation menu (logo on the left & menu on the right) positioned above the header image? I've attempted to modify the header.php and func ...

phpcsswordpressnavigation

What is the best approach for creating HTML and CSS layouts: focusing on margin/padding or positioning?

When it comes to designing with HTML5 and CSS3, is it more beneficial to rely on margin and padding for layouts or should positioning be the main focus? I have always combined both methods to achieve desired outcomes but there are examples where each appr ...

htmlcss

What is the best way to apply an SVG as the background-image for this text?

After examining the fiddle, it is clear that there is code to set the background of two spans to an image created with svg. The goal now is to achieve this dynamically using javascript (either jquery or raw) on the span with the "help" class, but unfortuna ...

javascriptjqueryhtmlcsssvg

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

What is the best way to focus on the N elements contained within another element?

Here is an example html input: <div class="grid--item user-info user-hover"> <div class="user-gravatar48"> <a href="/users/22656/jon-skeet"> <div class="gravatar-wrapper-48"> ...

htmlcssbeautifulsoupcss-selectors