locked
only one navbar display when scroll window left to right and right to left? RRS feed

  • Question

  • User-1026236167 posted

    hello 

    in my code i want to discuss some things

    *firstly when i scroll browser window from right to left then the second navbar which is of teal color when scroll window
    only text <h1>Gcg college dakha</h1> appear with the second navbar teal color presently <h1>Gcg college dakha</h1> above text in
    sky blue color and the height of the teal navbar should display as in present

    *and the above <span class="navbar-toggler-icon"></span> lie in button class they should appear in the right side of the teal color and they must
    they must have its related dropdown content of the teal color options

    *finally when it has done then scroll from right to left and left to right only teal color navbar display when open whole window
    then whole window 2 navbars display when scroll only one teal color display


    here is my code am highlight this related content

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="collegeform.WebForm3" %>

    aspx <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" /> <script src="https://kit.fontawesome.com/a7aa8e95dc.js" data-crossorigin="anonymous"></script> <!--<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />--> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="stylesheet" type="text/css" href="fontawesome-free-5.14.0-web/css/all.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script> <title></title> <link href="New%20folder/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> </head> <style> /* Navbar container */ .navbar { overflow: hidden; background-color: #00695C; font-family: Arial; } .navy { overflow: hidden; background-color: white; font-family: Arial; border: 0.1px solid; border-color: #555; } /* Links inside the navbar */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Links inside the navbar */ .navy a { float: left; font-size: 16px; color: #555; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: #114c45; } /* Add a red background color to navbar links on hover */ .navy a:hover, .dropdown:hover, .dropbtn { background-color: #E0F2F1; } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; ; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } .footer { background-color: #444; height: 21em; /*width: 86em;*/ /*;*/ } #useful { line-height: 1.5em; float: left; } #useful:hover { color: #f9f9f9; } #info { line-height: 1.9em; } .main { text-align: center; font-family: "Times New Roman"; } .marq { padding-top: 30px; padding-bottom: 30px; } .geek1 { font-size: 36px; font-weight: bold; color: white; text-align: center; } .geek2 { text-align: center; } .icon-object { text-align: center; margin: 10px; } </style> <body> <form id="form1" runat="server"> <nav class="navbar navbar-expand-lg navbar-light static-top" style="background-color:#E0F2F1"> <div class="container"> <div class="row" > <div class="col-sm-2" style="margin-left: 7.4em"> <asp:Image runat="server" ImageUrl="images/logo-230x265.png" Height="104" /> </div> <div class="col-sm-4" style="margin-left: 1em; margin-top: 1em;"> <h1>Gcg college dakha</h1> <span style="font-family: Open Sans, sans-serif; text-shadow: 0px 1px 2px rgba(0,0,0,0.4), 0px 3px 4px rgba(0,0,0,0.2); font-weight: 500"> <asp:Label ID="lbl1" runat="server" ForeColor="#00695C" Font-Size="27"> </asp:Label></span> </div> <div class="col-sm-4" style="margin-left: 17em; margin-top: -5.5em;"> <br /> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl2" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label> </span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Affiliated to:" Font-Bold="true"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl3" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label> </span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <br /> <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Email:" Font-Bold="true"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl4" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Registrations Helpline:" Font-Bold="true"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl5" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <br /> <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Tel:" Font-Bold="true"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl6" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Fax:" Font-Bold="true"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl7" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Registrations Helpline:" Font-Bold="true"> </asp:Label></span> <span style="font-family: Open Sans, sans-serif; margin-top: 12px"> <asp:Label ID="lbl8" runat="server" ForeColor="#000000" Font-Size="10.7"> </asp:Label></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive_one" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </div> </nav> <nav class="navbar navbar-expand-lg navbar-teal bg-teal static-top"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <%-- <div class="navbar" style="width: 86em;">--%> <div class="collapse navbar-collapse" id="navbarResponsive"> <div> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a href="#home"><i class="fas fa-link">&nbsp;</i> Apply Online</a> </li> <li class="nav-item"> <a href="#news"><i class="fas fa-link">&nbsp; </i>Incomplete Application</a> </li> <li class="nav-item"> <a href="#news"><i class="fas fa-link">&nbsp; </i>Invalid Application</a> </li> </ul> <div class="dropdown" style="margin-left: 600px; margin-top:-55px; "> <a href="#hhh"><i class="fa fa-user-plus" aria-hidden="true">&nbsp;Login</i></a> <button class="dropbtn"> <i class="fa fa-comment">&nbsp;ਪੰਜਾਬੀ</i> <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#"><i class="fa fa-envelope" aria-hidden="true">&nbsp;ਪੰਜਾਬੀ</i></a> <a href="#"><i class="fa fa-envelope" aria-hidden="true">&nbsp;English</i></a> </div> <%--<div style="margin-left: 700px; margin-top:-2px; "> <a href="#home"><i class="fa fa-user-plus" aria-hidden="true">&nbsp;Login</i></a> </div>--%> </div> </div> </div> </div> </nav> <!-- Bootstrap core JavaScript --> <script src="New%20folder/vendor/jquery/jquery.slim.min.js"></script> <script src="New%20folder/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> </form> </body> </html>

    Sunday, August 9, 2020 5:53 AM

All replies

  • User-939850651 posted

    Hi prabhjot1313,

    I tried to reproduce your problem using your code, but it failed.

    I want to know what scroll browser window from right to left means. In my test, the page cannot do such an operation.

    And I changed the style of the button border in the navigation bar so that I can easily find its position, but it will change position as I click.I see that there are many references to the same js or css in your page, I don’t think this will work at the same time.

    My test code:

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
    
        <script src="https://kit.fontawesome.com/a7aa8e95dc.js" data-crossorigin="anonymous"></script>
        <%--<script src='https://kit.fontawesome.com/a076d05399.js'></script>--%>
    
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
        <%--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />--%>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <%-- <link rel="stylesheet" type="text/css" href="fontawesome-free-5.14.0-web/css/all.css" />--%>
    
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
        <title></title>
        <style>
            /* Navbar container */
            .navbar {
                overflow: hidden;
                background-color: #00695C;
                font-family: Arial;
            }
    
            .navy {
                overflow: hidden;
                background-color: white;
                font-family: Arial;
                border: 0.1px solid;
                border-color: #555;
            }
    
            /* Links inside the navbar */
            .navbar a {
                float: left;
                font-size: 16px;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
    
            /* Links inside the navbar */
            .navy a {
                float: left;
                font-size: 16px;
                color: #555;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            /* The dropdown container */
            .dropdown {
                float: left;
                overflow: hidden;
            }
    
                /* Dropdown button */
                .dropdown .dropbtn {
                    font-size: 16px;
                    border: none;
                    outline: none;
                    color: white;
                    padding: 14px 16px;
                    background-color: inherit;
                    font-family: inherit; /* Important for vertical align on mobile phones */
                    margin: 0; /* Important for vertical align on mobile phones */
                }
    
                /* Add a red background color to navbar links on hover */
                .navbar a:hover, .dropdown:hover .dropbtn {
                    background-color: #114c45;
                }
    
                /* Add a red background color to navbar links on hover */
                .navy a:hover, .dropdown:hover, .dropbtn {
                    background-color: #E0F2F1;
                }
            /* Dropdown content (hidden by default) */
            .dropdown-content {
                display: none;
                ;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }
    
                /* Links inside the dropdown */
                .dropdown-content a {
                    float: none;
                    color: black;
                    padding: 12px 16px;
                    text-decoration: none;
                    display: block;
                    text-align: left;
                }
    
                    /* Add a grey background color to dropdown links on hover */
                    .dropdown-content a:hover {
                        background-color: #ddd;
                    }
    
            /* Show the dropdown menu on hover */
            .dropdown:hover .dropdown-content {
                display: block;
            }
    
            .footer {
                background-color: #444;
                height: 21em;
                /*width: 86em;*/
                /*;*/
            }
    
            #useful {
                line-height: 1.5em;
                float: left;
            }
    
                #useful:hover {
                    color: #f9f9f9;
                }
    
            #info {
                line-height: 1.9em;
            }
    
            .main {
                text-align: center;
                font-family: "Times New Roman";
            }
    
            .marq {
                padding-top: 30px;
                padding-bottom: 30px;
            }
    
            .geek1 {
                font-size: 36px;
                font-weight: bold;
                color: white;
                text-align: center;
            }
    
            .geek2 {
                text-align: center;
            }
    
    
            .icon-object {
                text-align: center;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <nav class="navbar navbar-expand-lg navbar-light static-top" style="background-color: #E0F2F1">
                <div class="container">
    
                    <div class="row">
    
                        <div class="col-sm-2" style="margin-left: 7.4em">
                            <asp:Image runat="server" ImageUrl="#" Height="104" />
                        </div>
    
                        <div class="col-sm-4" style="margin-left: 1em; margin-top: 1em;">
                            <h1>Gcg college dakha</h1>
                            <span style="font-family: Open Sans, sans-serif; text-shadow: 0px 1px 2px rgba(0,0,0,0.4), 0px 3px 4px rgba(0,0,0,0.2); font-weight: 500">
                                <asp:Label ID="lbl1" runat="server" ForeColor="#00695C" Font-Size="27"></asp:Label>
                            </span>
                        </div>
    
                        <div class="col-sm-4" style="margin-left: 17em; margin-top: -5.5em;">
                            <br />
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
    
                                <asp:Label ID="lbl2" runat="server" ForeColor="#000000" Font-Size="10.7">
                                </asp:Label>
                            </span>
    
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Affiliated to:" Font-Bold="true">
                                </asp:Label></span>
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <asp:Label ID="lbl3" runat="server" ForeColor="#000000" Font-Size="10.7"> 
                                </asp:Label>
                            </span>
    
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <br />
                                <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Email:" Font-Bold="true">
                                </asp:Label></span>
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
    
                                <asp:Label ID="lbl4" runat="server" ForeColor="#000000" Font-Size="10.7">
                                </asp:Label></span>
    
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Registrations Helpline:" Font-Bold="true">
                                </asp:Label></span>
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
    
                                <asp:Label ID="lbl5" runat="server" ForeColor="#000000" Font-Size="10.7">
                                </asp:Label></span>
    
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <br />
                                <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Tel:" Font-Bold="true">
                                </asp:Label></span>
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
    
                                <asp:Label ID="lbl6" runat="server" ForeColor="#000000" Font-Size="10.7">
                                </asp:Label></span>
    
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Fax:" Font-Bold="true">
                                </asp:Label></span>
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
    
                                <asp:Label ID="lbl7" runat="server" ForeColor="#000000" Font-Size="10.7">
                                </asp:Label></span>
    
    
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
                                <asp:Label runat="server" ForeColor="#000000" Font-Size="10.7" Text="Registrations Helpline:" Font-Bold="true">
                                </asp:Label></span>
                            <span style="font-family: Open Sans, sans-serif; margin-top: 12px">
    
                                <asp:Label ID="lbl8" runat="server" ForeColor="#000000" Font-Size="10.7">
                                </asp:Label></span>
    
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive_one" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-teal bg-teal static-top">
                <div class="container">
    
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" style="border-color: coral"
                        aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
    
                    <%-- <div class="navbar" style="width: 86em;">--%>
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <div>
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a href="#home"><i class="fas fa-link">&nbsp;</i> Apply Online</a>
                                </li>
                                <li class="nav-item">
                                    <a href="#news"><i class="fas fa-link">&nbsp; </i>Incomplete Application</a>
                                </li>
                                <li class="nav-item">
                                    <a href="#news"><i class="fas fa-link">&nbsp; </i>Invalid Application</a>
                                </li>
    
                            </ul>
    
                            <div class="dropdown" style="margin-left: 600px; margin-top: -55px;">
                                <a href="#hhh"><i class="fa fa-user-plus" aria-hidden="true">&nbsp;Login</i></a>
                                <button class="dropbtn">
                                    <i class="fa fa-comment">&nbsp;ਪੰਜਾਬੀ</i>
                                    <i class="fa fa-caret-down"></i>
    
                                </button>
    
                                <div class="dropdown-content">
                                    <a href="#"><i class="fa fa-envelope" aria-hidden="true">&nbsp;ਪੰਜਾਬੀ</i></a>
                                    <a href="#"><i class="fa fa-envelope" aria-hidden="true">&nbsp;English</i></a>
    
                                </div>
                                <%--<div style="margin-left: 700px; margin-top:-2px; ">
                                        <a href="#home"><i class="fa fa-user-plus" aria-hidden="true">&nbsp;Login</i></a>
                                    </div>--%>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- Bootstrap core JavaScript -->
            <script src="Scripts/bootstrap.bundle.min.js"></script>
        </form>
    </body>

    Result:

    Result.gif

    Could you explain the problems you are facing more clearly? And what effect you expect.

    If possible, please show the operation of the page.

    Best regards,

    Xudong Peng

    Monday, August 10, 2020 7:07 AM
  • User-1026236167 posted

    sir i will show u image how could image display in the forums?

    Monday, August 10, 2020 2:50 PM
  • User-939850651 posted

    Hi prabhjot1313,

    To display the image, you can do this:

    Upload your image on share image website. Then get the url of the image and post it in reply.

    Or you could also try to browse any case in Stack Overflow, then

    Best regards,

    Xudong Peng

    Tuesday, August 11, 2020 6:33 AM
  • User-939850651 posted

    Hi prabhjot1313,

    Any update?

    Thursday, August 27, 2020 3:49 AM
  • User-1026236167 posted

    sir i find answer

    Thursday, August 27, 2020 10:02 AM