Goran – increase width of main menu

  • Unknown's avatar
    simonscowen · Member ·

    hi – i’m using the Goran theme to try and build a site.

    I have x5 buttons in the main menu, each has a drop down.

    Unfortunately with the addition of the 5th item it pushes my main Nav on two lines (when viewed on desktop).

    Is there any way I can edit the widths? There seems to be a lot of wasted space to the right hand side of each drop down (which I suspect may be causing the problem)…

    Thank you in advance for any help… I’m only a basic user.

    Simon

    The blog I need help with is: (visible only to logged in users)

  • ryancowles · Staff ·

    Hi there! If you have WordPress.com Premium, then you can add some Custom CSS to adjust the spacing between menu items. If you decrease the spacing between them enough, they will all display on the same line. Something like the following should do the trick: 

    .menu-item-has-children > a {
	padding-right: 38px;
}

.main-navigation li {
	margin-right: 12px;
}

    Alternatively, you’ll either need to remove one of the menu items, or shorten their titles to get them all to fit.

    I hope this helps!

  • Unknown's avatar
    simonscowen · Member ·

    That’s great thank you – I had a little test of the premium and managed to Doba test – but obviously I can’t save that until I buy premium – but thank you when I get the premium I will use this!

    You are a star thank you for taking the time to help Ryan!!

  • Unknown's avatar
    simonscowen · Member ·

    PS. And sorry to be a pain.

    Is it normal when you adjust the CSS on a premium test (not actually subscribed to premium) that when you go to toggle the menu, it displays the drop down but automatically directs you through to the parent of the children in that menu?

    I’d prefer to just have it expand the menu on roll-over but I don’t know how that would affect the mobile version which relies on the toggle function…

    Sorry ryan, just though I’d ask whilst an expert was helping :o)

  • ryancowles · Staff ·

    Is it normal when you adjust the CSS on a premium test (not actually subscribed to premium) that when you go to toggle the menu, it displays the drop down but automatically directs you through to the parent of the children in that menu?

    I’m afraid that I don’t completely understand your question. Could you please let me know the exact steps that you are taking that result in the problem?

    Sorry ryan, just though I’d ask whilst an expert was helping :o)

    No worries at all! I’m here to help, and happy to do so :)

  • Unknown's avatar
    phelim2015 · Member ·

    I have the same problem that simonscowen had, except I only have three main menu items. While this displays fine on most screens, on smaller screens this is pushed to two lines.

    I’ve tried using the CSS styling you provided, ryancoles, but it doesn’t seem to do the job, and the menu items do get very bunched up as a result. Is there any way to reduce the blank (essentially wasted) space in between the site title and the menu (or the blank space either side of these elements), so that as the screen size shrinks they are pushed closer together? This would ensure everything stays on one line.

    I’ve managed to confine my site title to one line with the following:

    @media only screen and (min-width: 600px) {
.site-title {
width: 350px;
}

    But if I try this with menu-primary (obviously with an adjusted, higher width) my third menu item starts sliding off the page. Is this a padding issue, perhaps?

  • kathrynwp · Staff ·

    Hi Gavin – if you still need help, could you please start a new thread and provide a link to the site running Goran for which you need help?

    https://en.forums.wordpress.com/forum/themes#postform

  • Unknown's avatar
    phelim2015 · Member ·

    Have managed to find a fix myself, thanks.

  • The topic ‘Goran – increase width of main menu’ is closed to new replies.