The Media Query Menu is not aligned in the center for smaller screens, functioning in both medium and extra-small sizes

@import url('https://fonts.googleapis.com/css?family=Dosis');
* {
    box-sizing: border-box;
}

/*Xtra Small */

body {
    font-family: 'Dosis', sans-serif;
    line-height: 1.618em;
    font-size: 18px;
    background: #383231;
    color: #454545;
}

.main-container {
    width: 100%;
    position: relative;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}

.header-img {
    text-align: center;
}

.header-img img {
    width: 232px;
    height: 232px;
    border-radius: 50%;
    border: 1px solid #000;
}

.header-content {
    text-align: center;
    display: block;
}

.header-content h1 {
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: 2px;
    font-size: 7vw;
    margin-top: 54px;
}



.header-content h3 {
    font-size: 3vw;
    font-weight: 300;
    line-height: 2em;
}

.header,
.menu {
    padding: 48px 0;
}


a {
    text-decoration: none;
}

ul {
    list-style: none;
}

li {
    display: inline-block;
    position: relative;
}

.header-content ul li {
    display: inline-block;
    position: relative;
    width: 43px;
}

.header-content ul li a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: #81b09b;
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    border: 0.4px solid #383231;
    transition: all 0.35s;
    cursor: pointer;
}

.fa {
    color: #fff;
    transition: all 0.35s;
}

.fa:hover {
    color: #383231;
    transition: all 0.50s;
}

.menu {
    text-align: center;
}

.menu a {
    color: #454545;
}

nav li {
    display: inline-block;
    padding: 0 5px;
}

nav a {
    text-align: center;
    font-size: 18px;
}

nav img {
    width: 170px;
    height: 170px;
}

nav span {
    display: block;
    cursor: pointer;
}

hr {
    padding: 0;
    margin: 0;
}

.footer {
    width: 100%;
    padding: 17px;
}

.footer div {
    text-align: center;
    margin-bottom: 1rem;
}

.footer div:last-child {
    margin-bottom: 0;
}

.footer a {
    font-size: 18px;
}

.footer span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #81b09b;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.35s;
}




<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main-container">
        <div class="container-fluid header">
            <div class="row">
                <div class="col-md-5 col-xs-12 header-img">
                    <img src="https://image.ibb.co/cwot07/profile_gif.png" alt="profile-img">
                </div>
                <div class="col-md-7 col-xs-12 header-content">
                    <h1>Amit Sharma</h1>
                    <h3>Web Designer & Mobile Application Developer</h3>
                    <ul>
                        <li>
                            <a href="#" class="icon icon-fa cebook">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="icon icon-twitter">
                                <i class="fa fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="icon icon-googlePlus">
                                <i class="fa fa-google"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="icon icon-youtube">
                                <i class="fa fa-youtube"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <hr>
        <div class="menu">
            <div class="row">
                <div class="col-md-12">
                    <nav>
                        <ul>
                            <li>
                                <a href="#" class="menu">
                                    <img id="profile" src="https://image.ibb.co/cwot07/profile_gif.png" alt="profile-img">
                                    <span>Profile</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu">
                                    <img id="resume" class="resume" src="https://image.ibb.co/dwKNtS/resume_01.png" alt="img">
                                    <span>Resume</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu">
                                    <img id="port" class="portfolio" src="https://image.ibb.co/m5Ot07/port_01.png" alt="img">
                                    <span>Portfolio</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu">
                                    <img id="contact" class="contact" src="https://image.ibb.co/bFUu7n/contact_01.png" alt="img">
                                    <span>Contact</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <hr>
        <div class="footer">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <a class="contact-no">
                        <span><i class="fa fa-phone"></i></span>+919871344356
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <a class="mail">
                        <span><i class="fa fa-paper-plane"></i></span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c3cfcbd6cfc7c7d6909ae2dbc3cacdcd8ccbcc">[email protected]</a>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <a class="address">
                        <span><i class="fa fa-map-marker"></i></span>Rz New T 19 uttam nagar
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <span class="create-by">Create by Amit Sharma</span>
                </div>
            </div>
        </div>
    </div>

In Small Media Query Menu bar is not set in center but its work in both medium or extra small media query i try all possible solution. but did not work. In Small Media Query Menu bar is not set in center but its work in both medium or extra small media query i try all possible solution. but did not work.

cssresponsive-designmedia-queries

Answer №1

To include this CSS code in your stylesheet, simply paste it at the end of your existing CSS file.

<code>@media only screen and(max-width:768px) {
         nav ul {
    width: 85%;
    text-align: center;
    display: flex;
    align-items: center;
    }
    nav ul li {
    padding:0;
    width:25%;
    }
    nav ul li img {
    width:70%
    }
    }</code>

Answer №2

@media only screen and (min-width: 48em) {
    .navigation-bar {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

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

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

javascripthtmlcss

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Applying a CSS class to multiple instances of a control in ASP.NET

Incorporating the jQuery UI framework into my ASP.NET project is a current challenge I am facing. My approach involves applying CSS to the controls in order to achieve this objective. Specifically, I have multiple GridView controls that need styling. Is t ...

asp.netcssjquery-uiwebforms

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

javascriptjqueryhtmlcssfade

Curious as to why body.scrollTop functions differently in Google Chrome and Firefox compared to Microsoft Edge

Up until recently, the code body.scrollTop was functioning correctly in my Chrome browser. However, I've noticed that now it is returning 0 in both Firefox and Chrome, but still giving the proper value in Microsoft Edge. Is there anyone who can assis ...

javascripthtmlcss

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

javascripthtmlcssbootstrap-4

How to automatically close the menu on a Wordpress theme after clicking a link

I am currently using a Wordpress theme named ichiban, which can be viewed by following this link. Within this theme, I have created custom menu items that are designed to link directly to different sections on the same page. However, I am encountering an i ...

javascriptjquerycsswordpress

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

React is encountering a problem with loading the image source and it is

<img src="play.jpg" alt="play"></img> This code works fine in standard HTML, but I'm having trouble getting it to work in React. Is adding it as a background the only solution? ...

javascripthtmlcssreactjsimage

Invoking a function means calling another one simultaneously

There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...

javascriptjqueryhtmlcssajax

Customizing arrays in DataTables allows for creating new columns and displaying them in the table according to the specified customizations

Displaying dynamic data in a data table involves taking an array as input and customizing the fields within that array. ...

jqueryhtmlcssajax

Enlarge the div with a click

I was looking for a solution on how to make a div expand when clicked using jQuery I came across a tutorial that seemed simple and perfect, but I couldn't get it to work when I tried to replicate the code. Do you know if this code is still valid wit ...

javascriptjquerycssonclick

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

javascript show and hide navigation bar

I am currently working on a HTML menu that includes a button to open it and an unordered list : <nav class="menu"> <button> <h1>Menu</h1> </button> <ul class="mylist" ...

javascripthtmlcss

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps are needed to develop a proper HTML structure for this specific box in order to achieve the desired aesthetics?

Currently working on a box that includes various tags and an input field for adding new tags. The goal is to make this box resemble the tag form used on YouTube: https://i.stack.imgur.com/RSj2p.png This particular layout features a box with existing tags ...

htmlcsslayout

Page width incorrectly set leading to unnecessary scrolling

Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work. .container.open-sidebar { position: relative; left: 240px; } #sidebar ...

htmlcss

I am unable to utilize folder paths in CSS within my React application

Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance? This code snippet will work: const style={ width:'300px', ...

cssreactjsbackground-imagecss-loader

I want to hide jqvmap when viewing on mobile devices

I'm currently working on my website at . I have a template that I'm using as a guide, but I want to make the map disappear on mobile view and replace it with a dropdown list. Can anyone suggest what code I should use for this? Appreciate any hel ...

javascripthtmlcssresponsive-designjqvmap

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

javascriptjquerycsshighcharts