Navigation Menu overflow into the logo

Shapely
1

Hi Team,

My site is http://adesignerslife.com.au/

As the screenshot attached the menu is overflow to the site logo.

How to turn them into hamburger menu in that screen size so they don’t crash into the main logo? Please help.

Thanks

2

The log in for my wordpress website is:

Username: adesigne_Ange

Password: 1Designer1

Thanking you and hope to hear from you soon!

3

Hey there,

I hope you are well today and thank you for your question.

You can use a media query to address this issue.

The following code was added to the custom CSS section.

/*reduce logo */
@media only screen and (max-width: 1170px){
  .logo {
      width: 224px;
  }
}

You can see more examples of media queries here:
CSS3 Media Queries - Examples

Best regards,
Support.

4

Hi, thank you for the tip. Actually I had to add more code to get the layout I wanted.

/*reduce logo and nav to fit the menu */

.logo {
	margin-top: 5px;
    width:300px;
}

.main-navigation .menu > li {
	margin-right:20px;
}

.menu > li.dropdown {
	padding-right:10px !important;
}

.shapely-dropdown{
	padding:0;
	padding-right:5px;
	padding-left:5px;
	
}

#menu-item-589, #menu-item-1003{
	padding-right:0px;
	margin-right:14px;	
}

But thanks for the clues to make it so much easier and heading to a right direction. Have a great day Team!

5

Hi,

Glad we helped. :slight_smile:

Let us know If you have any other questions. Please feel free to contact us again in the future regarding any other issues.

If you’re happy with our service, don’t forget to rate us: [Shapely] Reviews | WordPress.org

Thanks,
laranz.