Menu Color

Reply

asp.ambur

Member

399 Points

1101 Posts

Menu Color

Jul 20, 2017 10:40 AM|asp.ambur|LINK

Hello

Im using this code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        .dropdown-menu {
            min-width: 200px;
        }

            .dropdown-menu.columns-2 {
                min-width: 400px;
            }

            .dropdown-menu.columns-3 {
                min-width: 600px;
            }

            .dropdown-menu li a {
                padding: 5px 15px;
                font-weight: 300;
            }

        .multi-column-dropdown {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

            .multi-column-dropdown li a {
                display: block;
                clear: both;
                line-height: 1.428571429;
                color: #333;
                white-space: normal;
            }

                .multi-column-dropdown li a:hover {
                    text-decoration: none;
                    color: #262626;
                    background-color: #999;
                }

        @media (max-width: 767px) {
            .dropdown-menu.multi-column {
                min-width: 240px !important;
                overflow-x: hidden;
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Example</a>
            </div>
            <!--/.navbar-header-->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <div class="row">
                                <div class="col-sm-6">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-6">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
            <!--/.navbar-collapse-->
        </nav>
        <!--/.navbar-->
    </form>
</body>
</html>

I want Menu Backgrodund Color to be Black

how to do so

Reply

A2H

All-Star

50831 Points

9895 Posts

Re: Menu Color

Jul 20, 2017 11:41 AM|A2H|LINK

asp.ambur
I want Menu Backgrodund Color to be Black

You could set the color to navbar to change the background color

.navbar {
        background-color:black;
      }

Sample Working Demo

Thanks,
Aje
My Blog | Dotnet Funda

Reply

Zhi Lv - MSF...

All-Star

45489 Points

7008 Posts

Microsoft

Re: Menu Color

Jul 21, 2017 02:48 AM|Zhi Lv - MSFT|LINK

Hi asp.ambur,

According to your code and description, I suggest you could change the class of nav tag from “navbar-default” to “navbar-inverse”, which is a built-in black navigation theme in Bootstrap.

Please refer to the following code:

<nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
         ...

And the screenshot as below:

If you have any other questions, please feel free to contact me any time.

Best regards,
Dillion

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

asp.ambur

Member

399 Points

1101 Posts

Re: Menu Color

Jul 21, 2017 09:14 AM|asp.ambur|LINK

Hello Zhi lv thanks for your code

I need menu item background also black how to do so

Reply

A2H

All-Star

50831 Points

9895 Posts

Re: Menu Color

Jul 21, 2017 06:39 PM|A2H|LINK

asp.ambur
I need menu item background also black how to do so

You can use the below css style to make the dropdownmenu list options also appear with black background color

 .dropdown-menu {
   background-color: black;
 }
 
 .dropdown-menu > li >a,
 .multi-column-dropdown >li >a {
   color: #ffffff;
 }

Sample Working Demo

Thanks,
Aje
My Blog | Dotnet Funda

Reply

asp.ambur

Member

399 Points

1101 Posts

Re: Menu Color

Jul 22, 2017 05:49 PM|asp.ambur|LINK

I tried it's not working any other ways to do this

Reply

A2H

All-Star

50831 Points

9895 Posts

Re: Menu Color

Jul 22, 2017 06:22 PM|A2H|LINK

asp.ambur
it's not working any other ways to do this

Please post your updated code if possible

Thanks,
Aje
My Blog | Dotnet Funda

Reply

asp.ambur

Member

399 Points

1101 Posts

Re: Menu Color

Jul 23, 2017 10:09 AM|asp.ambur|LINK

Below is my complete code format with

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
    <title>Master Page</title>
    <link href="templatemo_style.css" rel="stylesheet" type="text/css" />  

<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Style/chosen.css" />

<script language="JavaScript" type="text/javascript">
document.onmousedown=click;

function click() {
if ((event.button==2)) {
alert("Right Click Disabled");
}
}

function DIV1_onclick() {

}

</script>

<style type="text/css">
        .dropdown-menu {
            min-width: 200px;
        }

            .dropdown-menu.columns-2 {
                min-width: 800px;
            }

            .dropdown-menu.columns-3 {
                min-width: 1100px;
            }

            .dropdown-menu li a {
                padding: 5px 15px;
                font-weight: 100;
            }

        .multi-column-dropdown {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

            .multi-column-dropdown li a {
                display: block;
                clear: both;
                line-height: 1.0428571429;
                color: #333;
                white-space: normal;
            }

                .multi-column-dropdown li a:hover {
                    text-decoration: none;
                    color: #18928f;
                    background-color: #000000;
                }

        @media (max-width: 767px) {
            .dropdown-menu.multi-column {
                min-width: 240px !important;
                overflow-x: hidden;
            }
        }
    </style>


</head>

<body onload="Maximise()">			
    <form id="form1" runat="server" >

    <div>
        <table>
            <tr>
                <td colspan="3">
                    
                    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                     <li><a href="welcome.aspx">Home</a></li>

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server"> <title>Master Page</title> <link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.2.1.min.js"></script><script src="bootstrap.min.js"></script><link href="bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="Style/chosen.css" />
<script language="JavaScript" type="text/javascript">document.onmousedown=click;
function click() {if ((event.button==2)) {alert("Right Click Disabled");}}
function DIV1_onclick() {
}
</script>
<style type="text/css"> .dropdown-menu { min-width: 200px; }
.dropdown-menu.columns-2 { min-width: 800px; }
.dropdown-menu.columns-3 { min-width: 1100px; }
.dropdown-menu li a { padding: 5px 15px; font-weight: 100; }
.multi-column-dropdown { list-style: none; margin: 0px; padding: 0px; }
.multi-column-dropdown li a { display: block; clear: both; line-height: 1.0428571429; color: #333; white-space: normal; }
.multi-column-dropdown li a:hover { text-decoration: none; color: #18928f; background-color: #000000; }
@media (max-width: 767px) { .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } } </style>

</head>
<body onload="Maximise()"> <form id="form1" runat="server" >
<div> <table> <tr> <td colspan="3"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="welcome.aspx">Home</a></li>

Reply

Zhi Lv - MSF...

All-Star

45489 Points

7008 Posts

Microsoft

Re: Menu Color

Jul 24, 2017 02:15 AM|Zhi Lv - MSFT|LINK

Hi asp.ambur,

Please add the following code into your style tag:

<style type="text/css">
    /* for dropdown menu */
        .navbar-inverse .dropdown-menu {
        background-color: #333;
    }

    /* for items in dropdown menu */
        .navbar-nav > li > .dropdown-menu a{   color: #E5E5E5;  }

   /* following is your style before */
</style>

The screenshot as below:

If you have any other questions, please feel free to contact me any time.

Best Regards,
Dillion

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

asp.ambur

Member

399 Points

1101 Posts

Re: Menu Color

Jul 24, 2017 07:19 AM|asp.ambur|LINK

@Zhi Lv

Thanks For Your Code

Menu Color[Answered] RSS

9 replies

Shortcuts

Menu Color

Re: Menu Color

asp.ambur

Re: Menu Color

Re: Menu Color

Re: Menu Color

asp.ambur

Re: Menu Color

Re: Menu Color

asp.ambur

Re: Menu Color

Re: Menu Color

Re: Menu Color