Align multiple elements in a responsive fixed container

I have been attempting to center multiple elements, including images and buttons, within a fixed div at the top of the screen. Despite trying various tricks I found online, none seem to be effective. My goal is to ensure that the alignment works seamlessly regardless of the window size.

<div id='FixedMenu'>
    <button class='MenuItem'>Home</button>
    <button class='MenuItem'>About</button>
    <img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
    <button class='MenuItem'>Tools</button>
    <button class='MenuItem'>Events</button>
    <img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>

http://jsfiddle.net/clarinetking/2PGZS/37/

javascriptjqueryhtmlcssnavigation

Answer №1

To achieve a similar effect, you can fake flex/justify-content. Here is an example: http://jsfiddle.net/2PGZS/45/

#Main {
    vertical-align:middle;
    height:50px;
    width:80px;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    height:70px;
    transition: all 1s;
    text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
    content:'';
    display:inline-block;
    width:100%;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    height:40px;
    width:80px;
    vertical-align:middle;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    width:70px;
    height:70px;
    transition: all 1s;
    vertical-align:middle;
}
#CloseMenu.opacite {
    opacity:0.1;
}

If you prefer the up arrow always on the top right corner, check out this alternative: http://jsfiddle.net/2PGZS/46/

Answer №3

No JavaScript needed here, just pure CSS.

#Main {
    position:relative;
    height:50px;
    width:80px;
    display: inline-block;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    height:70px;
    transition: all 1s;
    text-align:center;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    display: inline-block;
    height:40px;
    width:80px;
    float:top;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    position:fixed;
    width:80px;
    height:80px;
    transition: all 1s;
}
#CloseMenu.opacite {
    opacity:0.1;
}
#FixedMenu * {

}

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

Obtaining user input from a content editable div in a React component

Get content from editable div const contentref=useRef() const handleclick=()=>{ setContent(contentref.current.value) console.log(contentref.current.value) } Element Properties <div name="textbox" ref ={contentref} cla ...

htmlreactjscontenteditablereact-dom

Accepting parameters in an Express POST requestWondering how to accept parameters in

Currently, I have an API that requires passing car make, model, and year in the URL. Using an express router post call, I am able to retrieve the query parameters and set them to an object. I need to ensure that the URL can accept parameters like this: lo ...

javascriptexpressurlrouter

The Shopify storefront API's create cart mutation generates an HTML response when called

I recently started developing an e-commerce website using Next.js and Shopify's storefront API. I have successfully set up the connection and can list all the products from the API. However, I encountered an issue when attempting to add a product for ...

javascriptnext.jsshopifyshopify-api

Is it possible to share deep links with just a hashtag?

I am currently developing a web application and I want to include social media buttons such as Facebook Like. I have tried using the HTML code/API provided by Facebook, AddThis, Shareaholic, ShareThis, but none of them seem to properly handle my deep link ...

htmlajaxfacebookdeep-linkingaddthis

Can AJAX function properly when the server-side code is hosted on a separate domain?

After opening Firefox's scratchpad and inputting the following code... function ajaxRequest() { var xmlhttp; var domainName = location.host; var url = 'http://leke.dyndns.org/cgi/dn2ipa/resolve-dns.py?domainName='; url = url + domainName + ...

javascriptajax

Retrieve a variable from the context and assign it to the Angular scope

I'm having trouble accessing the sourcePath in the controller $scope. This is the code I have: (function() { var sourcePath; sourcePath = 'app/assets/javascripts/shared/controllers/some_controller.coffee'; angular.module("shared"). ...

javascriptangularjs

Challenges Encountered When Working with React.useState()

I am facing an issue where a new row is not appearing after clicking the button. Although the console.log output indicates that the row was added correctly to the tables variable. Another concern I have is why I can see the new row added to the table even ...

javascriptreactjsmaterial-ui

Observing the timepiece malfunctioning beyond expectations

Let me explain the issue here in a simple way. I have a parent component where I execute a method that changes a property value of an object called products. This is working fine. However, when I pass this object as a prop to a child component and watch i ...

javascriptvue.jsvuejs2

Using different CSS classes interchangeably in AngularJS

Imagine you have a list with an unknown number of items, ranging from one to potentially dozens. You want to display five CSS classes in a regular alternating pattern. What would be the most effective approach to achieve this? Here is some sample HTML cod ...

javascriptcssangularjsng-class

Is there a way to dynamically set the width of a CSS property value in React? I'm looking for a solution that allows for flexibility in adjusting

let sliderVal = avgRound * 20; {sliderVal}% ...

cssreactjs

I am having trouble retrieving the Post values that were sent using jQuery ajax

UPDATE: After removing 'index.php' with .htaccess, I encountered a newly discovered issue which I am now working on resolving. UPDATE: Issue resolved! Turns out the problem was in the Javascript code: url: "/login/". It needed a trailing slash t ...

jqueryajaxcodeigniterpost

Determine the specific row number that the user clicked on within the table

I came across this code that apparently retrieves the number of the row that was clicked, but I am having trouble grasping how it works. Could someone please provide an explanation for the following code? <html> <head> <title&g ...

phpjavascriptmysql

JavaScript - Retrieve events from an element and assign them to a keyboard button

I am currently curious about the following scenario: Suppose I have an element with a particular event. For example, when this element is clicked, it triggers alert('clicked); Now, my question is: Is there a way to capture the events of this element ...

javascriptjquery

What is the solution to setting true and false equal to true in an AngularJS expression?

How can I determine if an input field has been touched and is empty, without using the built-in functions in Angular? <form-input is-invalid-on="isTouched && !gs.data.name || gs.data.name.length > 50"></form-input> If isTouched &am ...

javascriptangularjsboolean-logic

The issue encountered while attempting to utilize jspdf for exporting data

Currently, I am working on developing a web application using angularJS in combination with asp.net. My main goal is to export data into a PDF file, but unfortunately, I am facing some challenges in achieving this. While browsing on StackOverflow, I came ...

javascriptjqueryasp.netangularjs

What is the best way to horizontally align three animated progress bars alongside images?

Check out this jsfiddle that shows a vertical alignment of the progress bars. How can I modify it to align them horizontally and centered? https://jsfiddle.net/bLe0jLar/ .wrapper { width: 100px; height: 100px; } .wrapper > #bar, #bar2, #bar3 { ...

javascripthtmlcssflexbox

Adjustable table region in PHP

I need help with displaying multiple results in a dynamically created table within my program. Even though I want to show around 25 records, the program cuts off after the 5th record, leaving empty space. The issue seems to be that the area does not expand ...

phphtmlcssmysqlhtml-table

Transferring parameters via URL - When passing single quotes, they are converted to &#39;

In my current ASP.NET project, we encounter an issue with passing parameters through the URL. Whenever a single quote is passed, the URL automatically changes all single quotes to %27 and the actual JavaScript value reads them as &#39; I need assistan ...

javascriptc#asp.net.net

Flexbox: Distribute remaining space evenly while allowing content to wrap

Is there a method to instruct flexbox items to occupy the available space while wrapping as soon as they become smaller than their content? However, some items have a fixed width percentage. HTML <div class="grid"> <div class="grid__item"> ...

cssflexbox

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

htmlcsstext-direction