Docs

[leverpunch]

Hi,

I’m facing an issue with the alignment of my topbar elements when viewed on mobile (see attached screenshot).

I would like to have 3 rows for all my elements:

First Row: “Our Location” (left) + Contact No. (right)
Second Row: Email (center)
Third Row: “Ask Our Medical Director” (left) & “Make an Enquiry” (right)

All the 3 rows must be centralised horizontally & vertically to the top bar.

How can I achieve this?

Thanks!
Alvin

[leverpunch]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 480px){
    .adress__one {
        margin-left: 30px;
    }
    .adress__three {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        background-position-x: 40px;
    }
    .x-topbar .menu {
        width: 100%;
        margin-right: 0;
    }
    .x-topbar .menu ul {
        margin: 0;
    }
    .x-topbar .menu ul li {
        float: none;
        display: inline-block;
        margin-left: 15px;
    }
}

Hope it helps 🙂

[leverpunch]

This reply has been marked as private.

[Jade]

Hi Alvin,

The bullet points seem to be displaying correctly on my end. Please update the previous code to:

@media (max-width: 480px){
    .adress__one {
        margin-left: 30px;
    }
    .adress__three {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        background-position-x: 40px;
    }
    .x-topbar .menu {
        width: 100%;
        margin-right: 0;
    }
    .x-topbar .menu ul {
        margin: 0;
    }
    .x-topbar .menu ul li {
        float: none;
        display: inline-block;
        margin-left: 15px;
    }
    .contact3 {
       text-align: left;
    }
   
}

[leverpunch]

This reply has been marked as private.

[Lely]

Hi Alvin,

1. Please check this custom CSS:

@media (max-width: 480px){
    .contact1 {
        margin-left: 30px;
    }
    .contact3 {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        background-position-x: 40px;
    }
    .x-topbar .menu {
        width: 100%;
        margin-right: 0;
    }
    .x-topbar .menu ul {
        margin: 0;
    }
    .x-topbar .menu ul li {
        float: none;
        display: inline-block; 
        margin-left: 15px;
    }
    .contact3 {
       text-align: left;
    }
}

Update this part:

    .x-topbar .menu ul li {
        float: none;
        display: inline-block; 
        margin-left: 15px;
    }

To this:

    .x-topbar .menu ul li {
        float: none;
        margin-left: 35px;
    }

2.) From the CSS on #1, update this part:

    .contact1 {
        margin-left: 30px;
    }

To this:

.contact1, .contact2 {
    margin: 7px 7px 0 20px;
}

3.) Again from CSS on #1, update this part:

    .contact3 {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        background-position-x: 40px;
    }

To this:

    .contact3 {
        width: 100%;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        background-position-x: 19px;
        padding-left: 52px;
        margin-top: 7px;
    }

Then remove this part:

    .contact3 {
       text-align: left;
    }

Hope this helps.

[Author]

Posts