Forums

Elemental clone with autonav responsive header navigation

Permalink
Hello.
I have read many posts regarding the responsive header navigation and still cannot figure out why it is not working on my site. Here's my site -
http://orchidconservationalliance.org/dev/index.php...
Here's what I've done:
I cloned the Elemental theme so the basic structure is the same. In the current state, I selected the "responsive header navigation" custom template. You can see that no styles are applied. If I selected breadcrumb from the custom template it works. These two templates live in the same place so it doesn't make sense that one works and the other doesn't. Further, if I switch the theme back to Elemental, the responsive header navigation custom template works. It's the same code. hmm.

Based on the posts I've read the documentation isn't clear. I was hoping Andrew would continue with his Urbanic theme and demonstrate how he would create a responsive nav, replacing the code that came with the template. That would be awesome! In the meantime, I'd love some help.

I'm using this site build to get up to speed on 5.7, finding my way around, etc. Right now, I am just adding a stylesheet to write over existing styles. As I spend time in the files, I can see where I can go and replace the css correctly.

Thanks much.
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi labdesignstudio,

The CSS for the Responsive Header Navigation custom template for the Auto-Nav block is supplied by the theme, not the template.

This is the CSS that comes with the Responsive Header Navigation template:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...

This is the CSS for the Responsive Header Navigation template that the Elemental theme provides:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...
labdesignstudio replied on at Permalink Reply
Thanks for your quick response.

I am apologizing upfront for what appears to be some density on my part. If I have copied the Elemental files exactly, making the appropriate path changes for the namespace, use and theme path (I can see my theme is working), then why isn't the responsive nav working? My understanding of what you are saying (and I have read many of your answers to similar posts), the header.less and the build/mobile/navigation.less styles should be applied. Right now on the site I activated the "responsive header navigation" which totally wiped out all styles, thus the bullets, but even without it I have a vertical nav, not a horizontal one.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@labdesignstudio

Looking at your navigation, it has been customized and does not appear to contain the classes and elements for the CSS to work. From the structure, it doesn't appear that you are applying the custom template.
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...

Example: Elemental with Home and About links
<div class="col-sm-5 col-xs-6">
    <nav class="ccm-responsive-navigation original">
        <ul>
            <li class="nav-selected nav-path-selected"><a href="http://localhost/concrete5/index.php" target="_self" class="nav-selected nav-path-selected">Home</a></li>
            <li class=""><a href="http://localhost/concrete5/index.php/about" target="_self" class="">About</a></li>
        </ul>
    </nav>
    <div class="ccm-responsive-menu-launch"><i></i></div>
</div>

Example: your theme with Home and About links
<div class="col-sm-8 col-xs-6">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav">
            <li class="nav-selected nav-path-selected"><a href="http://orchidconservationalliance.org/dev/index.php" target="_self" class="nav-selected nav-path-selected">Home</a></li>
            <li class=""><a href="http://orchidconservationalliance.org/dev/index.php/about" target="_self" class="">About</a></li>
        </ul>
    </div>
Viewing 15 lines of 16 lines. View entire code block.
labdesignstudio replied on at Permalink Reply
Just wanted to get back and say thank you MrKDilkington. I realized that I had the div for my background image placed so that it altered my header. I moved the div inside <main> and all is well. I am able to now add the autonav responsive template and everything is working. It definitely helps to have another pair of eyes.

Thanks again.