Change Main Navigation menu to inline

  • Resolved grandpion

    (@grandpion)


    12 years, 2 months ago

    I’m trying to get my website to display a menu as inline rather than a block of links. I’ve tried following the tutorial on wordpress codex, but the theme I’m using seems to have structured the code that governs the alignment differently.

    website is

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    If you talk about the Header navigation menu :

    First step, :
    You have to grow up the width of the .site-header container ! For example 1000 px, to match the div.site-main width.

    Then, you should see that your Header menu going on the left of your site.

    Next step :
    Replace ‘Block’ by ‘Inline for .main-navigation a
    and
    Replace ‘Block’ by ‘Inline for .main-navigation li
    and
    add ‘margin-right: 5%;’ to .main-navigation li

    That’s it !
    Here is the Demo.

    Regards

    Thread Starter grandpion

    (@grandpion)

    Hi, thanks for the reply – I’ve made the changes you suggested but have run into a strange issue: the menu displays as inline if the browser window is under a certain width, but over that it displays in a block. Any ideas? I’ve attached some images of the problem below. Thanks so much!

    narrow browser

    wide browser

    Thread Starter grandpion

    (@grandpion)

    got it working, thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Main Navigation menu to inline’ is closed to new replies.