locked
Nicely Format Site.Master RRS feed

  • Question

  • User1769015664 posted

    The following Site.Master works but it looks ugly when form is shrunk. e.g.  The master section gets taller which partially overlaps on contents of the content page and menu options are no longer on the same row.

    How do I keep it 

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - Product Enrollment</title>
    
        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>
        <webopt:bundlereference runat="server" path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    
        <style>
            #xFooter
    
             #footer{  
            background:#083b5f; 
            color:yellow;   
            text-align:center;  
            padding-bottom: 0%;  
            font-size: 20px; 
            height:27px;
            text-wrap:inherit;
        }   
       </style>
    
    </head>
    <body>
        <form id="mainForm" runat="server">
            <asp:ScriptManager runat="server">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <asp:ScriptReference Name="respond" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                </Scripts>
            </asp:ScriptManager>
    
    <%--        <div class="navbar navbar-inverse navbar-fixed-top" style="left: 0; right: 0; top: -1px">--%>
            <div id="mainDiv" runat="server" class="navbar navbar-inverse navbar-fixed-top" 
                style="background:linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                <div id="subDiv" runat="server" class="container" style="background:linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
    
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" runat="server" href="~/">
                            <h3 style="display: inline; border:none; color: white;">
                                <img alt="" src="images/Kry_Logo.png" />
                                Krypton Associates
                            </h3>
                        </a>
                        <br />
                    </div>
    
                    <div id="myDiv" runat="server" class="navbar-collapse collapse">
                        <ul id="ulMenu" runat="server" class="nav navbar-nav">
                            <li><a runat="server" href="~/temp">Home</a></li>
                            <li><a runat="server" href="~/AboutKIS">About</a></li>
                            <li><a runat="server" href="~/Contact">Contact</a></li>
                            <li><a runat="server" href="~/temp">KIS</a></li>
                            <li><a runat="server" href="~/LoadProd">Load Product</a></li>
                        </ul>
                        <asp:LoginView id="lvLoginRegister" runat="server" ViewStateMode="Disabled">
                            <AnonymousTemplate>
                                <ul runat="server" id="ulLogin" class="nav navbar-nav navbar-right">
                                    <li id="liRegister"><a runat="server" href="~/RegisterKIS">Register</a></li>
                                    <li id="liLogin"><a runat="server" href="~/Default">Log in</a></li>
                                </ul>
    
                                <br /><br /><br /><br />
                                <ul class="nav navbar-nav navbar-right">
                                <ul >
                                    <div id ="SocialMedia_Images1" style="right: 0px;">
                                        <a href="https://www.facebook.com/pages/KIS/284654368054741?sk=wall" >
                                        <img src="images/kis.jpg"/> </a>
                                    </div>
                                </ul>
    
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                    <li>
                                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                    </li>
                                </ul>
                            </LoggedInTemplate>
                        </asp:LoginView>
    
                        <div style="text-align:right;">
                            <asp:Label ID="lblUser" runat="server" Text="User" backcolor="#E6AC00" ForeColor="black"></asp:Label>
                        </div>
    
                        <div id="somediv">
                            <button type="button" id="btn_open_modal" class="btn btn-primary btn-lg "
                                style="background-color: #1E5A8C; display:none;">Add New Product</button>
    
                            <asp:Button ID="Button1" class="button" runat="server" Text="Upload Document" 
                                style="background-color: #1E5A8C; display:none; font-weight:bold;"
                                CssClass="auto-style1" display="none"/>
                        </div>
    
                    </div>
    
                </div>
            </div>
    
            <div class="container body-content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
    
                </asp:ContentPlaceHolder>
                <hr />
                <footer id="footer">
                    <p style="color:whitesmoke;">&copy; <%: DateTime.Now.Year %> - Krypton Associates</p>
                </footer>
           </div>
        </form>
    
    </body>
    </html>

    Tuesday, October 6, 2020 6:49 AM

Answers

  • User-1330468790 posted

    Hi NJ2, 

     

    I am not sure how large the image is so that I did test from my side using two "100 X 100" picture to provide you with a direction to modify the codes.

     

    I have a taller logo on upper left corner which is the same height as the height of the blue menu bar.

    This area belongs to the area [<div class="navbar-header">]  which is separated from the area [ <div id="myDiv" runat="server" class="navbar-collapse collapse ">]. Therefore, you need to think about changing the size of this area to cover the logo image.

     

    If I remove <br> like you have indicated, the blue menu bar  will display the way you have showed in the picture but, when you resize the form to smaller width, the Facebook icon comes down to content page on the left along with 2 menu options "Register"and "Login and the literal User. All right below company logo on the left.

    If you remove <br/> elements, the only thing you need to do is to change the height of the area "nav-header" so that the area could cover the log image. Regarding the other options, you might need to put them into the UL element "ulLogin" or whatever UL element with class "nav navbar-nav". That way, when you resize the page to a certain size, the elements will be collapsed into the button with three dashes.

     

    Moreover, I changed the breakpoint for the navigation bar so that the collapse will happen when page size decreases to 1100px.(default 768px).

     

    More details, you could refer to below codes.  You will need to change the picture size or change height/width property from CSS style to fit your project.

     

    Master Page:

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - Product Enrollment</title>
        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>
        <webopt:BundleReference runat="server" Path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style>
            /* change the area height to fit logo image */
            .navbar-brand {
                height: auto;
            }
    
            /* make the text displayed in line with the logo image*/
            .navbar-brand > img {
                display:inline;
            }
        
    
    
    
    
            #footer {
                background: #083b5f;
                color: yellow;
                text-align: center;
                padding-bottom: 0%;
                font-size: 20px;
                height: 27px;
                text-wrap: inherit;
            }
    
            /* leave some spaces on the top so that the content will not be covered by nav bar */
            .body-content {
                padding-top: 100px;
                padding-bottom: 42px;
            }
    
            /* change the break point for collapsing the menu understand 1100px */
            @media (max-width: 1100px) {
                .navbar-header {
                    float: none;
                }
    
                .navbar-left, .navbar-right {
                    float: none !important;
                }
    
                .navbar-toggle {
                    display: block;
                }
    
                .navbar-collapse {
                    border-top: 1px solid transparent;
                    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
                }
    
                .navbar-fixed-top {
                    top: 0;
                    border-width: 0 0 1px;
                }
    
                .navbar-collapse.collapse {
                    display: none !important;
                }
    
                .navbar-nav {
                    float: none !important;
                    margin-top: 7.5px;
                }
    
                    .navbar-nav > li {
                        float: none;
                    }
    
                        .navbar-nav > li > a {
                            padding-top: 10px;
                            padding-bottom: 10px;
                        }
    
                .collapse.in {
                    display: block !important;
                }
            }
        </style>
    </head>
    <body>
        <form id="mainForm" runat="server">
            <asp:ScriptManager runat="server">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                </Scripts>
            </asp:ScriptManager>
            <div id="mainDiv" runat="server" class="navbar navbar-expand-xl navbar-inverse navbar-fixed-top "
                style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                <div id="subDiv" runat="server" class="container-fluid text-center" style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
    
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
    
                        <a class="navbar-brand" runat="server" href="~/">
                            <%-- <h3 style="display: inline; border: none; color: white;">--%>
                            <img src="Images/twitter.png" height="100" class="d-inline" alt="">Krypton Associates
                           <%-- </h3>--%>
                        </a>
    
                    </div>
    
                    <div id="myDiv" runat="server" class="navbar-collapse collapse ">
                        <ul id="ulMenu" runat="server" class="nav navbar-nav">
                            <li><a runat="server" href="~/temp">Home</a></li>
                            <li><a runat="server" href="~/AboutKIS">About</a></li>
                            <li><a runat="server" href="~/Contact">Contact</a></li>
                            <li><a runat="server" href="~/temp">KIS</a></li>
                            <li><a runat="server" href="~/LoadProd">Load Product</a></li>
                        </ul>
    
                        <ul runat="server" id="ulLogin" class="nav navbar-nav navbar-right">
                            <li class="nav-item" id="liRegister"><a runat="server" href="~/RegisterKIS">Register</a></li>
                            <li class="nav-item" id="liLogin"><a runat="server" href="~/Default">Log in</a></li>
                            <li class="nav-item" id="SocialMedia_Images1" style="right: 0px;">
                                <a href="https://www.facebook.com/pages/KIS/284654368054741?sk=wall">
                                    <img src="Images/facebook.png" alt="" height="100px" />
                                    <div style="text-align: right;">
                                        <asp:Label ID="lblUser" runat="server" Text="User" BackColor="#E6AC00" ForeColor="black"></asp:Label>
                                    </div>
                                </a>
                            </li>
    
                        </ul>
    
    
    
    
    
                        <div id="somediv">
                            <button type="button" id="btn_open_modal" class="btn btn-primary btn-lg "
                                style="background-color: #1E5A8C; display: none;">
                                Add New Product</button>
    
                            <asp:Button ID="Button1" class="button" runat="server" Text="Upload Document"
                                Style="background-color: #1E5A8C; display: none; font-weight: bold;"
                                CssClass="auto-style1" display="none" />
                        </div>
                    </div>
    
                </div>
            </div>
    
            <div class="container body-content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <hr />
                <footer id="footer">
                    <p style="color: whitesmoke;">&copy; <%: DateTime.Now.Year %> - Krypton Associates</p>
                </footer>
            </div>
        </form>
    </body>

    Content aspx:

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h3>Example with Master Page</h3>
    </asp:Content>

    Demo:

      

    If you still have problem after modifying the codes, feel free to post the updated codes so that we can easily provide you with a solution.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 7, 2020 9:48 AM

All replies

  • User1769015664 posted

    I am looking for some help in creating a Site.master page like the one below marked in red, here is the original link if needed.

    https://docs.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/master-pages/creating-a-site-wide-layout-using-master-pages-cs

    I have created one close to it but it looks weird when page is shrunk, it was in my previous post but didn't get a reponse.

    Tuesday, October 6, 2020 5:39 PM
  • User-1330468790 posted

    Hi NJ2,

     

    I have tested your codes and debugged them in browsers (Press F12 in dev tool to check elements).

    Finally, I found out that you have added few <br/> in the page which changed the layout for the menu bar.

    I think that causes your problem.

     

    Details:

    <asp:LoginView id="lvLoginRegister" runat="server" ViewStateMode="Disabled">
                            <AnonymousTemplate>
                                <ul runat="server" id="ulLogin" class="nav navbar-nav navbar-right">
                                    <li id="liRegister"><a runat="server" href="~/RegisterKIS">Register</a></li>
                                    <li id="liLogin"><a runat="server" href="~/Default">Log in</a></li>
                                </ul>
    
                                <br /><br /><br /><br />
                                <ul class="nav navbar-nav navbar-right">
                                <ul >
                                    <div id ="SocialMedia_Images1" style="right: 0px;">
                                        <a href="https://www.facebook.com/pages/KIS/284654368054741?sk=wall" >
                                        <img src="images/kis.jpg"/> </a>
                                    </div>
                                </ul>
    
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                    <li>
                                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                    </li>
                                </ul>
                            </LoggedInTemplate>
                        </asp:LoginView>

     Solution:

    Remove them.

     

    Rendered Page (Before):

    Rendered Page (After):

     

    Best regards,

    Sean

    Wednesday, October 7, 2020 5:29 AM
  • User1769015664 posted

    That won't fix the problem for 2 reasons...

    1. I have a taller logo on upper left corner which is the same height as the height of the blue menu bar.
    2. If I remove <br> like you have indicated, the blue menu bar  will display the way you have showed in the picture but, when you resize the form to smaller width, the Facebook icon comes down to content page on the left along with 2 menu options "Register"and "Login and the literal User. All right below company logo on the left.
    Wednesday, October 7, 2020 5:49 AM
  • User-1330468790 posted

    Hi NJ2, 

     

    I am not sure how large the image is so that I did test from my side using two "100 X 100" picture to provide you with a direction to modify the codes.

     

    I have a taller logo on upper left corner which is the same height as the height of the blue menu bar.

    This area belongs to the area [<div class="navbar-header">]  which is separated from the area [ <div id="myDiv" runat="server" class="navbar-collapse collapse ">]. Therefore, you need to think about changing the size of this area to cover the logo image.

     

    If I remove <br> like you have indicated, the blue menu bar  will display the way you have showed in the picture but, when you resize the form to smaller width, the Facebook icon comes down to content page on the left along with 2 menu options "Register"and "Login and the literal User. All right below company logo on the left.

    If you remove <br/> elements, the only thing you need to do is to change the height of the area "nav-header" so that the area could cover the log image. Regarding the other options, you might need to put them into the UL element "ulLogin" or whatever UL element with class "nav navbar-nav". That way, when you resize the page to a certain size, the elements will be collapsed into the button with three dashes.

     

    Moreover, I changed the breakpoint for the navigation bar so that the collapse will happen when page size decreases to 1100px.(default 768px).

     

    More details, you could refer to below codes.  You will need to change the picture size or change height/width property from CSS style to fit your project.

     

    Master Page:

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - Product Enrollment</title>
        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>
        <webopt:BundleReference runat="server" Path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style>
            /* change the area height to fit logo image */
            .navbar-brand {
                height: auto;
            }
    
            /* make the text displayed in line with the logo image*/
            .navbar-brand > img {
                display:inline;
            }
        
    
    
    
    
            #footer {
                background: #083b5f;
                color: yellow;
                text-align: center;
                padding-bottom: 0%;
                font-size: 20px;
                height: 27px;
                text-wrap: inherit;
            }
    
            /* leave some spaces on the top so that the content will not be covered by nav bar */
            .body-content {
                padding-top: 100px;
                padding-bottom: 42px;
            }
    
            /* change the break point for collapsing the menu understand 1100px */
            @media (max-width: 1100px) {
                .navbar-header {
                    float: none;
                }
    
                .navbar-left, .navbar-right {
                    float: none !important;
                }
    
                .navbar-toggle {
                    display: block;
                }
    
                .navbar-collapse {
                    border-top: 1px solid transparent;
                    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
                }
    
                .navbar-fixed-top {
                    top: 0;
                    border-width: 0 0 1px;
                }
    
                .navbar-collapse.collapse {
                    display: none !important;
                }
    
                .navbar-nav {
                    float: none !important;
                    margin-top: 7.5px;
                }
    
                    .navbar-nav > li {
                        float: none;
                    }
    
                        .navbar-nav > li > a {
                            padding-top: 10px;
                            padding-bottom: 10px;
                        }
    
                .collapse.in {
                    display: block !important;
                }
            }
        </style>
    </head>
    <body>
        <form id="mainForm" runat="server">
            <asp:ScriptManager runat="server">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                </Scripts>
            </asp:ScriptManager>
            <div id="mainDiv" runat="server" class="navbar navbar-expand-xl navbar-inverse navbar-fixed-top "
                style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
                <div id="subDiv" runat="server" class="container-fluid text-center" style="background: linear-gradient(90deg, #1E5A8C 10%, #083b5f 35%, #1E5A8C 80%);">
    
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
    
                        <a class="navbar-brand" runat="server" href="~/">
                            <%-- <h3 style="display: inline; border: none; color: white;">--%>
                            <img src="Images/twitter.png" height="100" class="d-inline" alt="">Krypton Associates
                           <%-- </h3>--%>
                        </a>
    
                    </div>
    
                    <div id="myDiv" runat="server" class="navbar-collapse collapse ">
                        <ul id="ulMenu" runat="server" class="nav navbar-nav">
                            <li><a runat="server" href="~/temp">Home</a></li>
                            <li><a runat="server" href="~/AboutKIS">About</a></li>
                            <li><a runat="server" href="~/Contact">Contact</a></li>
                            <li><a runat="server" href="~/temp">KIS</a></li>
                            <li><a runat="server" href="~/LoadProd">Load Product</a></li>
                        </ul>
    
                        <ul runat="server" id="ulLogin" class="nav navbar-nav navbar-right">
                            <li class="nav-item" id="liRegister"><a runat="server" href="~/RegisterKIS">Register</a></li>
                            <li class="nav-item" id="liLogin"><a runat="server" href="~/Default">Log in</a></li>
                            <li class="nav-item" id="SocialMedia_Images1" style="right: 0px;">
                                <a href="https://www.facebook.com/pages/KIS/284654368054741?sk=wall">
                                    <img src="Images/facebook.png" alt="" height="100px" />
                                    <div style="text-align: right;">
                                        <asp:Label ID="lblUser" runat="server" Text="User" BackColor="#E6AC00" ForeColor="black"></asp:Label>
                                    </div>
                                </a>
                            </li>
    
                        </ul>
    
    
    
    
    
                        <div id="somediv">
                            <button type="button" id="btn_open_modal" class="btn btn-primary btn-lg "
                                style="background-color: #1E5A8C; display: none;">
                                Add New Product</button>
    
                            <asp:Button ID="Button1" class="button" runat="server" Text="Upload Document"
                                Style="background-color: #1E5A8C; display: none; font-weight: bold;"
                                CssClass="auto-style1" display="none" />
                        </div>
                    </div>
    
                </div>
            </div>
    
            <div class="container body-content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <hr />
                <footer id="footer">
                    <p style="color: whitesmoke;">&copy; <%: DateTime.Now.Year %> - Krypton Associates</p>
                </footer>
            </div>
        </form>
    </body>

    Content aspx:

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h3>Example with Master Page</h3>
    </asp:Content>

    Demo:

      

    If you still have problem after modifying the codes, feel free to post the updated codes so that we can easily provide you with a solution.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 7, 2020 9:48 AM
  • User1769015664 posted

    Hi Sean,

    How do I change color of these menu items (Home   About    Contact    Login   Register      etc.)?

    Sunday, October 18, 2020 4:54 AM
  • User1769015664 posted

    Never mind!

    I applied style to <li> element and it worked.

    Sunday, October 18, 2020 5:53 AM