Navbar Location

Hello,
I would like to arrange the navigation menu so that the logo is on the left and the menu items are on the right (as can be seen in the picture below). Currently the menu items are directly next to the logo and I have tried various ways to change that but to no avail. Do you know how this would be possible to do? Thank you.

Hi,

Thank you for contacting us. I am happy to help with your queries.

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 993px) {
      #site-navigation > .menu-main-container {
        width: 100%;
      }
      #site-navigation > .menu-main-container ul.menu {
        display: table;
        float: right;  
      }
    }

Please share the link to your website if the code doesn’t do what you want. So I can inspect directly and correct the code.

Regards,
Kharis
aThemes Support

Hello Kharis,
Thank you for your reply, unfortunately this code did not have any effect on the header.
The website is https://www.gingerinopom.com/
We already have the following additional CSS applied, but we did a test removing that and just inserting the code you provided us and still there was no change.

   .site-info.container { 
      display: none;
    } 

    .entry-title {
    display: none;
    }

    .site-description{
       display: none;     
    }

    .site-title { 
      display: none;
    } 

    header nav a {
    font-weight: bold;
    font-family: amatic SC;
    text-decoration: none;
    font-size: 30px;
    color: #333333;
    text-shadow: whitesmoke 1px 1px 1px;
    }

    @media only screen and (min-width: 993px) {
      #site-navigation > .menu-main-container {
    	 width: 100%;
          }
      #site-navigation > .menu-main-container ul.menu {
       display: table;
       float: right;  
          }

We have also struggled to try to apply an underline to the selected menu item, if you have an answer for that too?

Thanks!

We have been trying but still haven’t managed to figure out a solution. Do you have any other suggestions?
Thanks

Hi,

Thank you for getting back along with the link.

As inspected, the below code would be working. Please kindly try.

    @media only screen and (min-width: 993px) {
      #site-navigation > div {
        width: 100%;
      }
      #site-navigation > div ul.menu {
        display: table;
        float: right;  
      }
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

That worked perfectly. Thank you so much.

Also with regards to the navbar, there is a transition which makes the logo shrink when scrolling down the page. Is it possible to make the whole bar including the menu items shrink too whilst also removing the transparent to opaque transition?

Thank you in advance!

Hi,

Thank you for getting back along with other queries.

Please try adding the below CSS code:

    @media only screen and (min-width: 993px) {
      .header-navigation.header-floating.floating {
        background-color: #fff;
      }
      .header-navigation.header-floating.floating .main-navigation ul li a {
        font-size: 18px;
      }
    }

Feel free to raise new topics for your other questions and use one topic for one question, we can help you in a better way.

Regards,
Kharis
aThemes Support

Thank you very much Kharis, that worked perfectly. And from the code you gave us, we managed to figure out how to remove the transparency.
Thanks very much.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support