none
Could someone help me? make menu fixed with submenu RRS feed

  • Question

  • I'm new to my company and I'm solving some CSS issues on my page.

    I'm using VB as codebehind, but the problem is front end.

    I have a big menu that slides in horizontal getting the rest hidden content when you click in the circled red button.

    Also, I have a submenu coloured in blue.


    My boss told me to make the menu fixed and when I add possition fixed and overflow hidden to the menu, the submenu doesn't open. Well, if I put overflow to visible I get this

    Is there a way to make it fixed and the submenu functional?

    Below my code

    <div class="top-menu" id="dvMenu">
                
    
                <ul class="nav" style="">
                    <li> <a href="../home/index">Dashboard</a> </li>
                        <li id="li_Messages" class="has-sub">
    
                            <a href="#" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
                                <div>
                                        <b class="caret pull-right"></b>
                                    <i class="fa fa-envelope-o"></i>
                                    <span>Messages</span>
                                </div>
                            </a>
    
                                <ul class="sub-menu">
    
                                        <li><a href="">Manual send</a></li>
                                        <li><a href="">File Upload</a></li>
                                        <li><a href="">Register message</a></li>
                                        <li><a href="">Register Monitor</a></li>
                                        <li><a href="">Register Cost Center</a></li>
                                        <li><a href="">Register Campaigns</a></li>
                                        <li><a href="">Subscribe</a></li>
                                        <li><a href="#">Fraud Register</a></li>
                                        <li><a href="../create/contato">Cadastro de Contatos</a></li>
                                        <li><a href="#">Manual Flow Control</a></li>
                                </ul>
                        </li>
                        <li id="li_EMail" class="has-sub">
    
                            <a href="#">
                                <div>
                                        <b class="caret pull-right"></b>
                                    <i class="fa fa-code"></i>
                                    <span>E-Mail</span>
                                </div>
                            </a>
    
                                <ul class="sub-menu">
    
                                        <li><a href="../create/email">Layout de E-Mail</a></li>
                                        <li><a href="../create/dominios">Domínios e Remetentes</a></li>
                                </ul>
                        </li>
                        <li id="li_Search" class="has-sub">
                            <a href="#">
                                <div>
                                        <b class="caret pull-right"></b>
                                    <i class=""></i>
                                    <span>Search</span>
                                </div>
                            </a>
    
                                <ul class="sub-menu">
    
                                        <li><a href="#">Manual Enrichment</a></li>
                                        <li><a href="#">Enrichment Archive</a></li>
                                        <li><a href="#">Enrichment Results</a></li>
                                </ul>
                        </li>
    
                            <a href="#">
                                <div>
                                        <b class="caret pull-right"></b>
                                    <i class="fa fa-cogs"></i>
                                    <span>Management</span>
                                </div>
                            </a>
    
                                <ul class="sub-menu">
    
                                        <li><a href="../Gerencial/">Gateway Control</a></li>
                                        <li><a href="../Gerencial/">Gateway Distribution</a></li>
                                        <li><a href="../Gerencial/">Bind de Gateway</a></li>
                                        <li><a href="../Gerencial/">Company Portfolio</a></li>
                                        <li><a href="../Gerencial/">Level Register</a></li>
                                        <li><a href="../Gerencial/">Menus Registration</a></li>
                                        <li><a href="../Gerencial/">Layouts Registration</a></li>
                                        <li><a href="../Gerencial/">Monitors Registration</a></li>
                                        <li><a href="../Gerencial/">Reporting Record</a></li>
                                        <li><a href="../Gerencial/">Shooting Control</a></li>
                                        <li><a href="../Gerencial/Dashboard">Dashboard</a></li>
                                        <li><a href="#">Gateway Registration</a></li>
                                        <li><a href="#">Server</a></li>
                                        <li><a href="#">Dashboard - RT</a></li>
                                        <li><a href="#">Informative Record</a></li>
                                        <li><a href="../gerencial/">Gerenciamento Site</a></li>
                                </ul>
                        </li>
                    
                </ul>
    
            </div>
    #dvMenu {
        background-image: linear-gradient(to top, rgb(43, 56, 61), rgb(43, 56, 61));
        height: 40px;
        margin-left: -540px;
        margin-top: 70px;
        overflow: visible;
        ;
    }



    


    Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.


    • Edited by Alvesanderson Tuesday, July 23, 2019 9:06 PM adding content
    • Moved by KareninstructorMVP Wednesday, July 24, 2019 12:41 PM Moved from vb.net forum
    Tuesday, July 23, 2019 9:01 PM

All replies

  • Hello,

    This forum is for VB.NET, not CSS/HTML. What I would advise is to not build your own menu system but instead look at BootStrap version 4.x for a solution. Bootstrap supports sub-menus/drop-downs along with responsive design meaning dependent on browser viewport size menu items may wrap or percent a burger item.

    From BootStrap documenation with sample https://getbootstrap.com/docs/4.0/components/navbar/ and a randomly picked sample https://getbootstrap.com/docs/3.4/examples/navbar/#


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Tuesday, July 23, 2019 11:17 PM
  • Thanks for your response. I'm aware that I added my code in wrong Forum.

    I didn't find it for html/css. You being Moderator, could you move it to the appropriate place?


    Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.

    Wednesday, July 24, 2019 11:50 AM
  • Thanks for your response. I'm aware that I added my code in wrong Forum.

    I didn't find it for html/css. You being Moderator, could you move it to the appropriate place?


    Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.

    There are no forums for this which is why I responded as I did. And have to wonder why you marked my reply as Off-Topic. In the mean time I will move your question to off-topic forum.

    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Wednesday, July 24, 2019 12:41 PM