Preventing navigation from wrapping to second line on 1024x768 and below

Viewed 16

The below cshtml renders well on large resolutions but causes the nav to wrap on 1024x768 and smaller. Where am I going wrong? The objective is to have the nav menu items centered on the screen even when browser is resized, along with logout aligned to the right. When the browser is minimzed, menu items should replace with the navigation icon and expand vertically. Please assist.

CSS

.navi-menu {
    background-image: none;
    background-color: blue !important;
    color: white !important;
}

    .navi-menu .k-item {
        background-color: blue !important;
        color: white;
    }

        .navi-menu .k-item .k-link {
            background-color: blue !important;
            color: white;
        }

        .navi-menu .k-item a:hover,
        .navi-menu .k-item a:focus {
            background-color: blue !important;
        }

    .navi-menu .k-link:hover,
    .navi-menu .k-link:focus {
        background-color: blue !important;
    }
.navi-menu-item {
    margin-top: 2px !important;
    border-color: blue !important;
    border-width: 1px !important;
}

HTML


<div class="row navi-menu">
    <div class="col-md-3 col-sm-3 col-lg-3">
    </div>
    <div class="col-md-9 col-sm-9 col-lg-9 row">
        <div class="col-md-1 col-sm-1 col-lg-1"></div>
        <div class="col-md-8 col-sm-8 col-lg-8">
            <div class="text-right row" style="padding-left:0px;">
                @(Html.Kendo().Menu()
                    .Name("Menu")
                    .Items(items =>
                    {
                        items.Add().Encoded(false).Text("<span class=\"k-icon k-i-home\"></span>Home").Action("Index", "Home");
                        items.Add()
                        .Text("Podcast")
                        .Items(children =>
                        {
                            children.Add().Text("Pod Uploads").Action("Uploads", "Uploads");
                            children.Add().Text("Pod Play").Action("PodPlay", "PodPlay"); ;
                            children.Add().Text("Pod History").Action("Index", "PodHistory");
                            children.Add().Text("Pods").Items(innerChildren =>
                        {
                            innerChildren.Add().Text("New").Action("Index", "New");
                            innerChildren.Add().Text("Old").Action("Index", "Old");
                        });
                            children.Add().Text("News").Action("Index", "News");
                        });
                        if (_userService.IsUserContractor() == 0)
                        {
                            items.Add().Text("PodReviews").Action("Index", "PodReview");
                        }
                        items.Add().Text("Activity")
                        .Items(children =>
                        {
                            children.Add().Text("Reviews");
                            children.Add().Text("Visits");
                            children.Add().Text("Trends");
                        });

                        items.Add().Text("Uploads");
                    }))
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-lg-3">
            <div class="user-info" style="padding-top:10px;padding-left:20px;">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                        <span class="user-name">
                            <img src="~/pods/images/uicon.png" alt="User" style="height:20px;width:35px;" />
                            Welcome User
                        </span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <form id="logout" method="post" action="@Url.Action("Logout", "Home")">
                                <a href="#" onclick="document.getElementById('logout').submit();">Logout</a>
                            </form>
                        </li>
                    </ul>
                </div>
                <div class="dropdown"></div>
            </div>
        </div>
    </div>
</div>
0 Answers
Related