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

50741 Points

9876 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

45479 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

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

50741 Points

9876 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

50741 Points

9876 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

45479 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

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