how to make 2 horizontal lines in nav bar

  • Cannot generate 2 lines in nav bar, get overflow ito 2nd line but not able to directly control input.
    ref: https://health-maintenance.stargate.co.nz/index.html

    detail from css :

    #mainmenu {
    font-size: .8em;
    font-weight: bold;
    list-style-type:none;
    display: inline;
    margin-left: .1em;
    margin-right: .1em;
    width: auto;
    }
    #mainmenu li {
    display: inline;
    margin-right: .1em;
    }
    #mainmenu ul {
    list-style-type: none;
    display: inline;
    }
    #mainmenu a {
    padding: .25em .5em .25em .5em;
    text-decoration: none;
    color: #F1E9E3;
    }
    #mainmenu a:hover {
    text-decoration: underline;
    }

    The explanation at https://www.w3schools.com/css/css_navbar.asp does not make the detail I need for two lines.

    Assistance would be greatly appreciated, thank you.

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

  • You can control the width of the nav bar if you want to make additional lines,

    Maybe this is what you meant:

    #mainmenu li {
	display: inline-block;
	margin-right: .1em;
}

    Thread Starter mistral7-wporg

    (@mistral7-wporg)

    Thanks Samuel, will give that a shot.

    Thread Starter mistral7-wporg

    (@mistral7-wporg)

    Sorry Samuel, did not achieve the result I was hoping for. I would like to be able to define content in each line of the nav bar. At the moment I get overflow onto the 2nd line.

    Hi Ken,

    Do you mean to have every menu item in a single line?

    #mainmenu li {
	display: block;
	margin-right: .1em;
}

    ?

    You need to elaborate as I don’t understand what you are opting to do..

    Thread Starter mistral7-wporg

    (@mistral7-wporg)

    Hi Samuel, sorry to be confusing.

    I have a horizontal nav bar that presently has some 12 items on it and I wish to break this into two horizontal bars, one immediately below the other.

    Regards

    Ken

    Alright then, this could help:

    #mainmenu > ul > li:nth-child(7):after {
	content: '';
	display: block;
}

    If it worked, remember to update (7) with total-items/2 if you want to display same number of items in each line if possible..

    Moderator t-p

    (@t-p)

    – what theme are you using?
    – where did you download it from?

    Thread Starter mistral7-wporg

    (@mistral7-wporg)

    Hello Tara, I am using raw html. Initially I made a mistake in putting the enquiry to the forum, but then Samuel has been so helpful.
    Hope you are not offended.
    Regards

    Thread Starter mistral7-wporg

    (@mistral7-wporg)

    Well, Samuel, your fix did not work. Probable reason is I am working outside of a theme structure.
    For future reference for anyone half interested, I made the second line by modifying the page code for the nav bar thus:

    <div id=”headermenu”>
    <div id=”mainmenu”>

    </div>
    <div id=”headermenu”>
    <div id=”mainmenu”>

    </div>
    </div>

    By adding this in the point I wanted a split I got the result I needed – oh, html5.

    </div>
    <div id=”headermenu”>
    <div id=”mainmenu”>

      Best wishes and thank you for your considered thoughts and constructs.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘how to make 2 horizontal lines in nav bar’ is closed to new replies.

Tags