bootstrap navbar class problem
Permalink 2 users found helpful
hi! I'm newish to web design and very new to concrete5. I'm concretising a site that I made with bootstrap and I have this problem with my navigation menu:
It works, I added it using the auto nav block and tinkering with the sitemap. But: instead of looking like a horizontal menu, it looks like an expanded hamburger menu. I know why this is – while substituting this:
with this:
I lost the classes on my <ul>, namely "nav nav-pills nav-justified" and now I don't know where to put them. Any help?
It works, I added it using the auto nav block and tinkering with the sitemap. But: instead of looking like a horizontal menu, it looks like an expanded hamburger menu. I know why this is – while substituting this:
<nav class="navbar navbar-collapse navbar-fixed-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="index.html">Home</a></li> <li><a href="work.html">Our Work</a></li> <li><a href="team.html">Our Team</a></li> <li><a href="method.html">Our Method</a></li> <li><a href="resources.html">Resources</a></li>
Viewing 15 lines of 19 lines. View entire code block.
with this:
<nav class="navbar navbar-collapse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<?php
$a = new Area('Header Nav');
$a->setBlockLimit(1);
$a->display($c);
?>
</div>Viewing 15 lines of 16 lines. View entire code block.
I lost the classes on my <ul>, namely "nav nav-pills nav-justified" and now I don't know where to put them. Any help?
This post just save me a bunch of time. Forgot that each plugin has a view.php file where structure live. Thanks a bunch.
If you'd like to have more than one autonav design on your site, you can do as Mirko stated but instead copy it to blocks/autonav/templates/ and it will appear as an available template for the block.
Here's a video showing exactly how its done, as well as adding the custom classes where you need them:http://archebian.org/videos/autonav.mp4...
Here's a video showing exactly how its done, as well as adding the custom classes where you need them:http://archebian.org/videos/autonav.mp4...
Thanks! I did as you said following that video.
But... when I am on edit mode, the navbar doesn't become editable, and no menu appears - this was the case before I added the css classes to view.php. (see screenshot attachment) Am I doing something wrong?
But... when I am on edit mode, the navbar doesn't become editable, and no menu appears - this was the case before I added the css classes to view.php. (see screenshot attachment) Am I doing something wrong?
Does the menu look and work like it should when you are not in edit mode?
If you are sure that you have followed ob7dev's instructions correctly and the autonav block isn't editable in edit more, it could be a javascript conflict.
If you are sure that you have followed ob7dev's instructions correctly and the autonav block isn't editable in edit more, it could be a javascript conflict.
Possibly a z-index issue. If the menu z-index is higher than the c5 area hovers they (area hovers) are below the menu hence causing the block to become uneditable. You may also need to clear the cache, which I didn't need to do in the video because I have it turned off for development.
Thank you Mirko and David for bearing with me!
So: here's the sitehttp://concrete.uauage.org/
as you can see, the menu is on the left and it's basically the hamburger menu expanded, instead of looking like the one here:http://consumation.uauage.org/
When not in edit mode, the menu works, and in edit mode, it just highlights the block with a grey outline, instead of green as other blocks. Other blocks do show the menu when I click.
I changed the z-index to 49 (I remember I read somewhere that the C5 bar has a z-index of 50... hope that's correct), but the navbar is still not editable... I cannot even remove it! and still no menu appears if I click! I removed something from the "Global Areas" but it wasn't a global area, I remember adding the autonav block to each page!
I'll keep fiddling with it, but if you have more ideas in the meantime, I'm incredibly grateful!
So: here's the sitehttp://concrete.uauage.org/
as you can see, the menu is on the left and it's basically the hamburger menu expanded, instead of looking like the one here:http://consumation.uauage.org/
When not in edit mode, the menu works, and in edit mode, it just highlights the block with a grey outline, instead of green as other blocks. Other blocks do show the menu when I click.
I changed the z-index to 49 (I remember I read somewhere that the C5 bar has a z-index of 50... hope that's correct), but the navbar is still not editable... I cannot even remove it! and still no menu appears if I click! I removed something from the "Global Areas" but it wasn't a global area, I remember adding the autonav block to each page!
I'll keep fiddling with it, but if you have more ideas in the meantime, I'm incredibly grateful!
Maybe a javascript conflict then.
Have you added your own jquery? If yes, you should try to use the jquery provided by concrete5. The cleanest way to do this, is to require jquery.js in your page_theme.php.
Does your theme have a page_theme.php? If yes, just require jquery. If not, you would have to create page_theme.php in your theme folder and add the following:
You would also have to uninstall your theme and reinstall it for concrete5 to take your page_theme.php into account.
If you cannot use the concrete5 copy of jquery because your theme requires a custom version, then copy your jquery.js version in the application>js folder. This will override the core jquery.
In both cases you obviously have to remove jquery from your theme since it will be provided by concrete5.
Have you added your own jquery? If yes, you should try to use the jquery provided by concrete5. The cleanest way to do this, is to require jquery.js in your page_theme.php.
Does your theme have a page_theme.php? If yes, just require jquery. If not, you would have to create page_theme.php in your theme folder and add the following:
<?php namespace Application\Theme\Consutheme; class PageTheme extends \Concrete\Core\Page\Theme\Theme { public function registerAssets() { $this->requireAsset('javascript', 'jquery'); } }
You would also have to uninstall your theme and reinstall it for concrete5 to take your page_theme.php into account.
If you cannot use the concrete5 copy of jquery because your theme requires a custom version, then copy your jquery.js version in the application>js folder. This will override the core jquery.
In both cases you obviously have to remove jquery from your theme since it will be provided by concrete5.
Whenever I've had blocks do this in the past, it was usually a CSS style, and this is how I would find the problem:
http://archebian.org/videos/cant-edit-block.mp4...
If your problem is of the same cause the video should help....
http://archebian.org/videos/cant-edit-block.mp4...
If your problem is of the same cause the video should help....
Here's a demo of how to fix up the menu styles:
http://archebian.org/videos/menu-styles.mp4...
http://archebian.org/videos/menu-styles.mp4...
You can also check if the zip file attached can help you with the page_theme, the autonav view.php and the z-index in main.css.
Good luck :)
Good luck :)
Thank you so much David and Mirko, I'm really humbled that you took time to help me out so thoroughly.
Copy it into application > blocks > autonav. Then add the classes in the view.php file.