1) This theme is responsive so if you were to view it on a mobile device, the layout is optimized for that device, part of that optimization is the way the menu looks, when responsive the menu is shown as a dropdown list which is fine, the problem is that if i select a page the next time i click the menu dropdown, the selected page has a blank link in its list, if i were to click it, it would take me to http://www.mydomain.com/undefined. How do i remove this link?
1B) Not a major issue, but a related issue none the less. when viewing on a mobile device, if i click a link from the dropdown nav menu, then breifly before the page starts to load, the tick that shows which page im on, goes to the page i just selected, but apart from that the tick stays next to 'navigation..' at the top of the list (meaning its never on the selected page apart from the instance i just described)
and finally ..
2)
Im having issues getting menumanager to act correctly with styles, for example:
current page shows fine and hover shows fine.
But when it comes to children pages the problems begin, If i were to hover over a child page it doesnt have the same reaction as if i were to hover over a parent page. Also if im on a child page id like for the parent page to be highlighted as the current page (and the child page to do the same when the menu is accessed)
to clarify: (1) & (1b) are issues with the mobile version
(2) is an issue when viewing normally on pc.
For reference the site in question is http://www.seenoequal.com/home
my code in menu manager is:
Code: Select all
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class=\"sub_nav\">" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->depth == 1}<li class="parent">{/if}
{if $node->current == true}<li class="current">{/if}
<a href="{$node->url}" class="{if $node->depth == 1}parent{/if}
{if $node->current == true or $node->parent == true}current{/if}
{if $node->prevdepth == 1}active{/if}
{if $node->depth == 1}active{/if}"
{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}</a>
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}Code: Select all
<!-- nav -->
<nav id="main-nav">
<ul>
<li class="current">
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Pages</a>
<ul>
<li>
<a href="#">Homepages</a>
<ul>
<li>
<a href="index.html">Homepage Revolution</a>
</li>
<li>
<a href="home-fullslider.html">Homepage Fullslider</a>
</li>
<li>
<a href="home-masonry.html">Homepage Masonry</a>
</li>
</ul>
</li>
<li>
<a href="#">Artists</a>
<ul>
<li>
<a href="artists.html">Arists 01</a>
</li>
<li>
<a href="artists2.html">Arists 02</a>
</li>
<li>
<a href="artist.html">Single Artist 01</a>
</li>
<li>
<a href="artist2.html">Single Artist 02</a>
</li>
</ul>
</li>
<li>
<a href="#">Releases</a>
<ul>
<li>
<a href="releases3.html">Releases 3 Columns</a>
</li>
<li>
<a href="releases.html">Releases 4 Columns</a>
</li>
<li>
<a href="release.html">Single Release 01</a>
</li>
<li>
<a href="release2.html">Single Release 02</a>
</li>
</ul>
</li>
<li>
<a href="#">Events</a>
<ul>
<li>
<a href="events.html">Events</a>
</li>
<li>
<a href="event.html">Single Event</a>
</li>
</ul>
</li>
<li>
<a href="#">Gallery</a>
<ul>
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<a href="gallery-album.html">Single Gallery Album</a>
</li>
</ul>
</li>
<li>
<a href="#">Blog</a>
<ul>
<li>
<a href="blog.html">Blog Entries</a>
</li>
<li>
<a href="blog-single.html">Single Entry</a>
</li>
</ul>
</li>
<li>
<a href="grid.html">Grid</a>
</li>
<li>
<a href="elements.html">Elements</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li>
<a href="artists.html">Artists</a>
</li>
<li>
<a href="releases.html">Releases</a>
</li>
<li>
<a href="events.html">Events</a>
</li>
<li>
<a href="gallery.html">Gallery</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
<!-- /nav -->Code: Select all
/* Navigation
---------------------------------------------------------------------- */
/* --- MAIN NAVIGATION --- */
#main-nav {
float: right;
border-right: 1px solid #242424;
border-left: 1px solid #111;
z-index: 100;
}
#main-nav li {
list-style: none;
float: left;
margin: 0;
position: relative;
}
#main-nav a {
color: #fff;
font-size: 12px;
font-weight: 800;
display: block;
padding: 0 20px;
line-height: 86px;
border-left: 1px solid #242424;
border-right: 1px solid #111;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 98;
}
#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a, #main-nav .active > a {
color: #fa4c29;
}
#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a { background-color: #121212; border-right: 1px solid #0f0f0f; }
#main-nav .active > a { background-color: #121212; }
/* Sub nav */
#main-nav ul ul {
background: #161616;
-webkit-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
-moz-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
display: none;
left: 0;
padding: 0;
position: absolute;
top: 86px;
width: 200px;
z-index: 300;
}
#main-nav ul ul li { float: none; }
#main-nav ul ul a {
border: 0;
border-bottom: 1px solid #0a0a0a;
border-top: 1px solid #1f1f1f;
color: #aaa;
display: block;
font-size: 11px;
letter-spacing: 0;
padding: 12px 20px !important;
text-align: left;
text-transform: none;
line-height: normal;
}
#main-nav ul ul a:hover, #main-nav ul ul .hover > a, #main-nav ul ul .current > a, #main-nav ul ul .current > a:hover {
background: #121212;
border-right: none;
color: #fff;
}
/* Dropdown */
#main-nav ul ul ul {
left: 100% !important;
top: 0 !important;
}
/* Responsive Nav */
#main-nav .responsive-nav {
background-image: url(../img/responsive-nav.png);
background-color: #111;
border: none;
background-position: center right;
background-repeat: no-repeat;
display: none;
width: 100%;
color: #fff;
}is there anybody that can offer guidance with my situation?
