This is a migrated thread and some comments may be shown as answers.

How to make menu on the top?

4 Answers 123 Views

This is a migrated thread and some comments may be shown as answers.

YN asked on 24 Jun 2019, 07:59 PM

expected-menu.png

current-menu.jpg

Hi Telerik experts,

How to make menu on the top position like the black one in my attached pic?

How to make menu start from left? and make the grid become larger to take all the space, not only sit in the center?

4 Answers, 1 is accepted

answered on 24 Jun 2019, 08:04 PM

Thank you!

another question: if can't make the menu has sub-menu. that's fine. I'll search how to put the tab in the page of menu item.

My current menu code is is _Layout.cshtml

<p><!DOCTYPE html><html><head> <link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" /> <link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </environment> <environment names="Staging,Production"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> </environment></head><body> <div class="k-header"> <div class="container"> <div class="row"> <h3>DASH Monitor <partial name="_LoginPartial" /></h3>

</div> </div> </div> <partial name="_CookieConsentPartial" />

<div class="container menu-content"> <div id="responsive-panel"> @(Html.Kendo().Menu()

.Name("Menu")

.Items(items => {

items.Add()

.Text("XXXXXX")

.Action("Index", "XXXXXX").Enabled(false);

items.Add()

.Text("XXXXXX")

.Action("Index", "XXXXXX");

items.Add()

.Text("XXXXXX")

.Action("Index", "XXXXXX").Enabled(false);

items.Add()

.Text("XXXXXX")

</p><p>.Action("Index", "XXXXXX").Enabled(false);

items.Add()

.Text("XXXXXX")

.Action("Index", "XXXXXX").Enabled(false);

items.Add()

.Text("XXXXXX")

.Action("XXXXXX", "Home");

items.Add()

.Text("XXXXXX")

.Action("XXXXXX", "Home");

})

) </div> <button id="configure" class="k-rpanel-toggle k-button k-primary btn-toggle"><span class="k-icon k-i-hbars"></span></button> </div> <style>

#megaStore {

max-width: 600px;

margin: 30px auto;

padding-top: 120px;

background: url(@Url.Content("~/shared/web/menu/header.jpg")) no-repeat center 0;

}

#menu h2 {

font-size: 2em;

text-transform: uppercase;

padding: 5px 10px;

font-weight: bold; font-family:"Times New Roman", Times, serif;

}

#template img {

margin: 5px 20px 0 0;

float: left;

}

#template {

width: 380px;

}

#template ol {

float: left;

margin: 0 0 0 30px;

padding: 10px 10px 0 10px;

}

#template:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

#template .k-button {

float: left;

clear: left;

margin: 5px 0 5px 12px;

}

</style>

<div class="container body-content"> @RenderBody()

Accepted

answered on 27 Jun 2019, 10:02 AM

Hello Sara,

By default, the Kendo Menu will be forced to occupy the full width of its container. If it has been placed directly within the <body> element for example, the Menu will span to the width of that element (except for the margin / padding present on the <body>). Here you could find a Dojo sample demonstrating that appearance. As far as I can see, in your case the menu is nested within other elements and it uses the Bootstrap styling. In such case the parent elements of the Menu should also be styled accordingly.

I am afraid that I cannot understand properly the question from your latest post. May I ask you to clarify a bit?

Regards,
Veselin Tsvetanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 19 Jul 2019, 06:03 PM

expected-menu2.png

expected-menu387e55123c4644f690a97937709130df.png

actual.png

Thank you for replying.

what I want is like this: 'expected menu2.png' or a better one 'expected menu.png' (put menu and login account on top)

actually I got is this: 'actual.png' after I use same '_layout.cshtml' code as 'expected menu2.png'

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - TelerikAspNetCoreApp8</title>

<link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development">

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

</environment>

<environment names="Staging,Production">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

</environment>

</head>

<body class="k-content">

<nav class="navbar navbar-dark bg-dark">

<div class="container-fluid d-flex justify-content-between p-0">

<a class="navbar-brand d-flex align-items-center" asp-controller="Home" asp-action="Index">Your .NET Core Application</a>

<button id="configure" class="k-rpanel-toggle k-button k-primary btn-toggle">

<span class="k-icon k-i-menu"></span>

</button>

</div>

</nav>

<div id="responsive-panel" class="navbar navbar-dark bg-light mb-4">

<kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">

@(Html.Kendo().Menu()

.Name("Menu")

.Items(items =>

{

items.Add().Text("Home").Action("Index", "Home", new { area = "" });

items.Add().Text("About").Action("About", "Home", new { area = "" });

items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });

})

)

</kendo-responsivepanel>

</div>

<main>

<div class="container-fluid">

@RenderBody()

</div>

</main>

<footer class="footer text-center d-flex align-items-center">

<div class="container-fluid">

<p class="text-muted">

Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.

</p>

</div>

</footer>

<environment names="Development">

<script src="~/lib/bootstrap/js/bootstrap.js"></script>

</environment>

<environment names="Staging,Production">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"

asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"></script>

</environment>

@RenderSection("scripts", required: false)

</body>

</html>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to make menu on the top?

4 Answers, 1 is accepted