Primary menu creating third row

  • Hi!

    I’m trying to create two lines in my primary menu, so that each has four links (upper four in English, lower corresponding four in German).
    I changed the width of the .nav-section in the ‘customise CSS’ to 75% in order to create that layout. It works perfectly for all the links except one – the last in the upper row (“about me & contact”). Then the following link (“/Kunst/”) jumps to a mid-row.
    Could you please advise me how to prevent that from happening?

    Thanks a lot!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator t-p

    (@t-p)

    Looking at you site , you use decent theme.

    Decent theme has NOT been updated or maintained for over FOUR YEARS!!

    You can try asking at that theme’s support, but i doubt if you will get response.

    I suggestion would be to consider an another theme that is up to date and well maintained.

    Thread Starter sheilaob

    (@sheilaob)

    Hi and thanks for your quick response!
    Changing a theme would unfortunately mean making a whole lot of changes to the site’s layout and style, which is something that I’d prefer to avoid if possible, since it means days of sitting and making adjustments..
    Is there any CSS solution you may know of?
    Thanks a lot!

    Moderator t-p

    (@t-p)

    Is there any CSS solution you may know of?

    You may try asking at your theme’s support forum and hope someone may reply.

    Thread Starter sheilaob

    (@sheilaob)

    Thanks t-p, but unfortunately they don’t have a support forum and the only way to get support is with a key that I don’t have since I got the theme for free through WordPress.

    Therefore – if anybody here might have a solution, I’d much appreciate it!

    I’m not a developer myself, but I hope that developers who know their way might be able to find a solution.

    Thanks in advance!

    Hi @sheilaob,

    You just need to add this CSS to bottom of your themes style.css file.

    @media screen and (min-width: 1001px){
	.nav ul{
		display: flex;
		flex-wrap: wrap;
	}
	.nav li{
		max-width: 25%;
		width: 100%;
		line-height: normal;
	}
	.orange .primarymenu-section a{
		padding: 0;
		margin: 0 20px 10px;
		line-height: normal;
	}
}

    Also, if you want your menu text alignment in center on desktop then add this CSS in style.css file:

    @media screen and (min-width: 1001px){
	.orange .primarymenu-section a{
		text-align: center;
	}
}
    Thread Starter sheilaob

    (@sheilaob)

    Hi @himanshuc,

    Thanks a lot, that was a good tip. I ended up adjusting it a bit, since when I entered:
    .nav li{
    max-width: 25%;
    width: 100%;
    line-height: normal;
    }
    it solved the problem with the third row, but created two rows within each menu line for the titles that were too long to fit in 25%. So I left this part out and it still solved the problem with the ‘about and contact’ menu item.

    Now the whole menu slides into several rows, but only in a particular and small range of window width – between app 1001px-1096px. Any idea if and how I could solve that?

    Thanks a lot for your kind help, I appreciate it!

    • This reply was modified 2 years, 8 months ago by sheilaob.
    • This reply was modified 2 years, 8 months ago by sheilaob.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Primary menu creating third row’ is closed to new replies.