HTML  Menu Navigation

Posted on 2013-12-10
Last Modified: 2013-12-10
I have a ASP.NET site using an HTML menu.  I have several pages within different folders in the site.  The navigation is not working correctly with the pages that are in the folders.  I am inserting the navigation menu as it existed prior to adding the folders and pages within the folders.  When I navigate to a page within a folder I don't know how to fix it so it will navigate to a page outside of the folder.  The only way I know of is with ASP: Menu using a Navigation URL.  However I don't want to use that method,.  Thanks.

<div class="collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            <i class="icon-angle-down"></i>
                        <ul class="dropdown-menu">
                            <li class="active"><a href="index.html">Option 1: Default Page</a></li>
                            <li><a href="page_home1.html">Option 2: Layer Slider</a></li>
                            <li><a href="page_home2.html">Option 3: Revolution Slider</a></li>
                            <li><a href="page_home3.html">Option 4: Amazing Content</a></li>
                            <li><a href="page_home4.html">Option 5: Home Sidebar</a></li>
                            <li><a href="page_home5.html">Option 6: Home Flatty</a></li>
                            <li><a href="page_home6.html">Option 7: Home Magazine</a></li>
                            <li><a href="page_home7.html">Option 8: Home Portfolio</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            <i class="icon-angle-down"></i>
                        <ul class="dropdown-menu">
                            <li><a href="page_about.html">About Us</a></li>
                            <li><a href="page_about1.html">About Us Option</a></li>
                            <li><a href="page_services.html">Services</a></li>
                           <li><a href="page_404_error.html">404 Error</a></li>
                            <li><a href="page_404_error1.html">404 Error Option</a></li>
                            <li><a href="page_clients.html">Clients Page</a></li>
                            <li><a href="page_privacy.html">Privacy Policy</a></li>
                            <li><a href="page_terms.html">Terms Of Service</a></li>
                            <li><a href="page_2_columns_left.html">2 Columns Page Left</a></li>
                            <li><a href="page_2_columns_right.html">2 Columns Page Right</a></li>
                            <li><a href="page_3_columns.html">3 Columns Page</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            <i class="icon-angle-down"></i>
                        <ul class="dropdown-menu">
                            <li><a href="feature_grid.html">Grid Layout</a></li>
                            <li><a href="feature_boxes.html">Content Boxes</a></li>
                            <li><a href="feature_typography.html">Typography</a></li>
                            <li><a href="feature_tagline_boxes.html">Tagline Boxes</a></li>
                            <li><a href="feature_buttons.html">Buttons</a></li>
                            <li><a href="feature_icons.html">Icons</a></li>
                            <li><a href="feature_thumbails.html">Thumbails</a></li>
                            <li><a href="feature_components.html">Components</a></li>
                            <li><a href="feature_accardion_and_tabs.html">Accardion and Tabs</a></li>
                            <li><a href="feature_navigations.html">Navigations</a></li>
                            <li><a href="feature_tables.html">Tables</a></li>
                            <li><a href="feature_forms.html">Forms</a></li>
                            <li><a href="feature_testimonials.html">Testimonials</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            <i class="icon-angle-down"></i>
                        <ul class="dropdown-menu">
                            <li><a href="portfolio_text_blocks.html">Portfolio Text Blocks</a></li>
                            <li><a href="portfolio_2_column.html">Portfolio 2 Columns</a></li>
                            <li><a href="portfolio_3_column.html">Portfolio 3 Columns</a></li>
                            <li><a href="portfolio_4_column.html">Portfolio 4 Columns</a></li>
                            <li><a href="portfolio_item.html">Portfolio Item Option 1</a></li>
                            <li><a href="portfolio_item1.html">Portfolio Item Option 2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            <i class="icon-angle-down"></i>
                        <ul class="dropdown-menu">
                            <li><a href="blog_page.html">Blog Page</a></li>
                            <li><a href="blog_large.html">Blog Large</a></li>
                            <li><a href="blog_medium.html">Blog Medium</a></li>
                            <li><a href="blog_full_width.html">Blog Full Width</a></li>
                            <li><a href="blog_left_sidebar.html">Blog Left Sidebar</a></li>
                            <li><a href="blog_right_sidebar.html">Blog Right Sidebar</a></li>
                            <li><a href="blog_item_option1.html">Blog Item Option 1</a></li>
                            <li><a href="blog_item_option2.html">Blog Item Option 2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            <i class="icon-angle-down"></i>
                        <ul class="dropdown-menu">
                            <li><a href="page_contact1.html">Contacts Default</a></li>
                            <li><a href="page_contact2.html">Contacts Option 1</a></li>
                            <li><a href="~/default.aspx">Contacts Option 2</a></li>
                            <li><a href="~/Account/Login.aspx">Login</a></li>
                    <li class="hidden-sm"><a class="search"><i class="icon-search search-btn"></i></a></li>
                <div class="search-open">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button class="btn-u" type="button">Go</button>
                    </div><!-- /input-group -->
Question by:misnstt
  • 2
LVL 29

Expert Comment

by:Paul Jackson
ID: 39709763
Can you post the structure of your website showing the folder structure you're referring to.
Normally in the situation you describe you would change the href url so that it always starts at the root of the website  and then works up to where the page is located like :

href = "~/foldername/pagename.htm"

Author Comment

ID: 39709832
Hello I am attaching a image with a portion of the folder structure.  If I select a page in for example the Account Folder it is no problem.  I tried marking the pages within the Account folder as you suggested :
href = "~/Default.aspx"   to go to the main Default page outside of the Account Folder and that will not work.

Folder Structure
LVL 29

Accepted Solution

Paul Jackson earned 500 total points
ID: 39709855
try :


each ../ means to go up one level

so if it was 2 folder levels down from the root you would use:


Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
wordpress limitations 4 116
How to deal with "Consider using Code First Migrations to update the database" ? 7 275
MVC and Angular 2 105
Getting attribute Values using xslt 4 48
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question