How to Center Header Logo and Navigation Menu Correctly

Home Forums ColorNews Free How to Center Header Logo and Navigation Menu Correctly

This topic contains 9 replies, has 3 voices, and was last updated by  Nima 1 week, 3 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1328185

    Pristar
    Participant

    Hi,

    Please visit Best Dustbuster

    I’ve browsed around themegrill forum how to center header logo and navigation menu. Currently I’m using these:

    #header-logo-image {
    float: none;
    text-align: center;
    margin-left: 20%;
    margin-right: 20%;
    }

    #masthead .logo {
    float: none;
    margin: 0 auto;
    text-align: center;
    }

    #header-left-section {
    float: none;
    margin: auto;
    }

    .main-navigation {
    float: none;
    margin-left: 16%;
    margin-right: 10%;
    min-width: 70%;
    }

    .main-navigation li {
    padding: 0px 40px 2px 0px;
    text-align: center;
    }

    It seems to be working; however, I found a problem with desktop view on a mobile phone’s browser. There is a grey space on the right side (the website is pushed to the left). Changing the “margin-left: 16%;” to 0% fixed the grey area on the right side (website became full again), but the navigation menu move to the left again.

    Can you please help solving the CSS problem to center the navigation menu?

    Thank you

    #1328220

    Nilan
    Moderator

    Hi Pristar,

    Please, add the following CSS code to your custom CSS.

    #site-navigation .menu-toggle {
        margin: 0 auto;
    }

    Hope this will help you to make navigation menu on center. If there’s anything else that you need, please let us know.

    Regards,
    ThemeGrill Support

    #1328221

    Pristar
    Participant

    Hi Nilan,

    Thank you for the reply.

    The CSS code that you provided me doesn’t work. The website is still pushed to the left.

    Is there any other solution that you can think of?

    #1328333

    Nima
    Moderator

    Hi Pristar,

    Could you please provide us any screen shots where your problem has been arising.
    As we couldn’t see the problem you were looking for.

    Thanks!
    ThemeGrill Support Team

    #1328360

    Pristar
    Participant

    Hi Nima,

    Please see https://imgur.com/a/VNgks
    for the screenshots.

    1st image is using colormag
    2nd image is using colornews

    I’m using colornews (2nd image).
    I only used colormag to test if the CSS code causing any problem.

    The problem only occurs in a desktop view on a mobile phone’s browsers (tested with apple safari and google chrome android)

    “margin-left: 16%;” to 0% fixed the grey area on the right side (website became full again), but the navigation menu move to the left again.

    #1328486

    Nima
    Moderator

    Hi Pristar,

    Please, once remove the above code which you have mentioned in first post and get back to us then we will try your each code line by line and will try to figure out the problem.

    And also clarify us what do you mean by desktop view on a mobile phone’s browsers either you meant to be the landscape mode in mobile phone or other else.

    Thanks!
    ThemeGrill Support Team

    #1328489

    Pristar
    Participant

    Hi Nima,

    Use any android phone

    Open google chrome browser

    Tap the 3 dots button (located in top right)

    Tap request desktop site

    The problem also happened if you use apple phone’s safari browser and choose request desktop site

    Assume you don’t see the CSS code on the first post, what would you suggest to center the header logo and text menu?

    Thanks Nima

    #1328491

    Pristar
    Participant

    Hi Nima,

    Use any android phone

    Open google chrome browser

    Tap the 3 dots button (located in top right)

    Tap request desktop site

    The problem also happened if you use apple phone’s safari browser and choose request desktop site

    Assume you don’t see the CSS code on the first post, what would you suggest to center the header logo and text menu?

    Thanks Nima

    #1328492

    Pristar
    Participant

    Sorry double post

    • This reply was modified 1 week, 3 days ago by  Pristar.
    #1328646

    Nima
    Moderator

    Hi Pristar,

    The problem you have been facing is may be due to use of any other plugins so please once try to disable all plugin one by one and if it doesn’t solve then re-install the theme and check it.
    As you can check our demo site in your device it is all fine.

    After this problem gets fixed, post us back with the necessary changes you want and we will provide you a CSS solution.

    Thanks!
    ThemeGrill Support Team

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.