Cant add more links to the Top Menu

Hi

I have added 5 links to the top menu of the Astrid theme, I’m unable to add anymore without the link dropping to the next line, I would like all my top menu links on the same line, Can this be adjusted to allow more menu items

Thanks

Hi,

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

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

    @media only screen and (min-width: 1025px) {
      .main-navigation ul.menu > li {
        padding: 10px 5px;
      }
    }

Regards,
Kharis
aThemes Support

Thank You very much, That worked a treat. I would like to also change the text on the home page Customizing ▸ Header area Header text but its needs to be wider for the whole name, can this be wider with css code also?

Hello @paulmca,

Great that your menu issue is resolved now!

Regarding your new question, please try adding the given custom CSS code below at Appearance > Customize > Additional CSS from dashboard.

.header-image .header-info > .container {
	width: 100% !important;
} 

We hope this helps!

Please try that and let us know if you need further help.

Kind Regards,

Rodrigo.

aThemes Support

Hi

I now have the following css added to my site but the text is still dropping onto a separate line

@media only screen and (min-width: 1025px) {
.main-navigation ul.menu > li {
padding: 10px 12px;
}
}
.header-image .header-info > .container {
width: 100% !important;
}

The website is skywatchnorthernireland.com, Even if you can make the text smaller that would be ok to allow it to fit onto one line

Thank you

Hello,

Yes the only way is reduce the text a bit. Please try with the given CSS code below:

@media(min-width: 1025px) and (max-width: 1199px) {
	.main-navigation ul.menu > li > a {
		font-size: 11px;
	}
}

We hope this helps!

Let us know if you need further help.

Kind Regards,

Rodrigo.

aThemes Support

HI

That didnt change anything sadly

Hello,

Please try changing the code that my colleague @kharisblank sent for you before to this new:

@media only screen and (min-width: 1025px) {
    .main-navigation ul.menu > li {
        padding: 10px 13px;
    }
}

Just reduced a bit the padding from 10px 15px to 10px 13px.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

1 Like

Thank You this worked perfectly.