Question

Hello I have a django app which has a horizontal navigation. What happen recently, I decide to connect from my windows machine to use my app. This is what my horizontal nav looked like below.

For some reason, backup data and help are moved into a new line. But I want these two tabs to be in the same horizontal nav line. I tried using a different web browsers and the menu still looked the same.

One thing I can think of why this has happen is might be my resolution but I am not sure. My windows machine has a screen resolution of 1440 X 900 wile my linux machine has a resolution of 1024 x 768.

I wonder if there to make all my tabs stay in the same line. Might need to add some css to do it.

base_menu.html

   <ul id="toc">
            <li><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
            <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
            <li><a href="{% url mmc.views.search_item %}"><span> Item Search</span></a></li>
            <li><a><span>Service orders</span></a><br/>
            <ul class="subnav">
                    <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li>
                    <li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li>
                    <li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
            </ul>
            </li>
            <li><a><span>Collection/Delivery</span></a><br/>
            <ul class="subnav">
                    <li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
                    <li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
            </ul>
            </li>
            <li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
            <li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
            <li><a href="{% url mmc.views.help_index %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
    </ul>

Update: base.css file

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 200px;
    padding: 0;
    position relative;
}   

ul#toc li{
    background:#ffffff url(../images/tab.png);
    float: left;
    margin: 0 1px 0 0;

}

ul#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

ul#toc a {
    color: #000000;
    height: 2em;
    float: left;
    text-decoration: none;
    padding-left: 10px;
}

Answer 1

My windows machine has a screen resolution of 1440 X 900 while my linux
machine has a resolution of 1024 x 768.

Are you sure this isn’t reversed?

Your problem would make more sense if your windows resolution was smaller.

---

If that’s the case, one thing you can do is to set a specific pixel width for the nav.

Then, if the resolution is smaller than the viewport, you will have a horizontal scroll but the nav will all be one line.

EDIT

From the comment below How would I set up a specific width on my nav?

If ul#toc is the nav container, then

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 200px;
    padding: 0;
    position relative;
    width:1440px; //OR SOME OTHER #
}