That's it, by default, liferay main navigation is being collapsed to dockbar, wich is hidden for not admin users in my solution. I tryed hooking the dockbar and deleting the collapse icon, but site-navigation keeps hiding on window resize.
Any ideas please?
P.D: I saw this post:
- Move collapsed menu button from the dockbar
Where the problem is solved, but as I mention there, I think it's not a "stylish" way of solving this problem and it's could give me more problems.
Thanks for reading.
On the fly i could tell you how to solve it the toggle button in case of no dockbar presence.
On your custom theme based on classic one you have to customize navigation.vm and insert the code to have the hamburger icon close to the navigation.
(The code is not tested)
<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
<div class="navbar-inner">
#* start toogle hamburger menu *#
<a class="visible-phone brand btn" data-toggle="collapse" data-target="#navigation">
<i class="icon-reorder"></i>
#language ("main-menu")
</a>
#* end *#
<div class="collapse nav-collapse">
<ul aria-label="#language ("site-pages")" class="nav nav-collapse" role="menubar">
#foreach ($nav_item in $nav_items)
#set ($nav_item_attr_selected="")
#set ($nav_item_attr_has_popup="")
#set ($nav_item_caret="")
#set ($nav_item_css_class="lfr-nav-item")
#set ($nav_item_link_css_class="")
#*continue...*#
Related
I am trying to close the nav dropdown menu on scroll but I don't think I am targeting the class on the button correctly with jQuery as it is not working.
I am trying to target the .nav-menu-list class.
main.js and index.html
$(window).on('scroll', function() {
$('.nav-menu-list').prev().dropdown("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar-toggleable-md sticky clearfix fixed ">
<header id="topNav">
<div class="container">
<div class="row">
<nav>
<ul class="desktop-nav-links ">
<li class="list-group-item" >
Home
</li>
<li class="list-group-item">
<button class="dropdown-toggle nav-menu-list" type="button" id="" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu " aria-labelledby="content"> Content </div>
</li>
</ul>
At first I tried using $('.dropdown-toggle').prev().dropdown("toggle"); which worked and closed the menu on scroll. The issue this gave me though was that it also targeted all of the dropdown-toggles on the page causing things to break.
Any suggestions will be really appreciated, thank you.
Update
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open using -
$('li.show .nav-menu-list').dropdown("toggle");
So it is going to target the dropdown that is open.
Thank you everyone for helping me with this issue.
To target a class in jQuery, you must specify a class selector:
$('.nav-menu-list').prev().dropdown("toggle");
Note the leading . in front of nav-menu-list, which you were missing.
Thank you everyone for helping me with this issue.
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open with
$('li.show .nav-menu-list').dropdown("toggle");
So it is only going to be on the dropdown that is open.
I will add as an update to my question.
I hope this may also help anyone else with similar issues
I recently updated the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8.
I thought it wouldn't make much of a difference but my SideNav is not working right anymore. When I click on the menu, it does slide out but the dark overlay is on the entire screen and I cannot click anything. This is what it looks like:
It looks like the 'sidenav-overlay' div with the opacity is above the sideNav. Also, I cannot click on any menu inside this sideNav.
The implementation of this is basically similar to what is mentioned in the documentation. I'm not sure what changed over here.
EDIT1:
My code -
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="slide-out" class="side-nav hide-on-med-and-down print-hidden">
<li>Upload<i class="material-icons right">cloud_upload</i></li>
<li class="divider"></li>
<li class="div-title">Admin</li>
<li>Users</li>
<li>Roles</li>
</ul>
<i class="material-icons">view_headline</i>
LOGO
</div>
</nav>
</div>
What fixed this was that my side-nav ul list was inside the navbar-fixed div. This wasn't an issue in the previous version but for some reason, this broke in the current 0.97.8 version.
Just moving the side-nav outside the navbar section fixed this for me. Hopefully this helps someone else in the same situation.
I'm using bootstrap on WordPress using the _ib theme, and I would like to add in my own responsive menu for when window is less than 768px. By default bootstrap will convert the menu to a dropdown-toggle, which when clicked shows your original menu. What I would like to do is implement my own menu when it is used on a small device or at a low resolution.
How would I remove this dropdown-toggle? I have looked around the bootstrap JS files, but I'm no JS whizz, so I can't quite figure out how to simply scrap the dropdown-toggle.
Any help appreciated!
EDIT:
<div class="container">
<div class="row">
<div class="site-navigation-inner col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Go to...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div>
</div><!-- .container -->
I tried the simple method of just removing this .navbar-toggle as I don't need it, but that actually removes the entire menu even on a full page window...
When you look at you index php page. You will see your navigation divs.
To turn off the behavior you can remove the toggle class.
<div class = container>
Etc
One of the classes will be a toggle class. Simply remove it.
What version is it? 2 or 3.
You can just replace the code with yours. I'm familiar with joomla with is basically html surrounding php.
If your looking to modify the css you will need to override it. How you do this easily will depend on wether your template uses CSS LESS or a custom.css file. You could even remove the navigation diva and replace with your own code utilizing bootstrap layout classes.
Giving the version of bootstrap will help with this question.
Bootstrap uses media queries you need to find what query you are targeting. Bootstrap website is very informative on this
http://getbootstrap.com/getting-started/
There are examples of layouts here. Make sure your nav divs and classes are the same. It will work.
Please back up or comment out old code for reuse.
When I get to my PC il look at code if not fixed by then.
You cofusing me slightly here. You have a menu (bootstrap) one and you have a plugin that is also calling a menu?
Or
Do you have two menus on the same page? Or does your plugin rely on the the current menu?
Im confused what you want here. It looks like you have a menu as part of the template and then you are calling a module to create a menu in the form of a plugin. It will not work if this is the case.
The plugin menu may conflict with the existing menu. If you have your own existing menu why dont you just remove the entire template menu and then just let your plugin be called?
If I am way of the mark I apologize. However if a plugin is involved the code is an unknown!
Is the plugin an addon to the template? If not you may have a conflict
Think you may need to contact the developer of the plugin
NEWER
So the scrolling is working now... But it's fixed to the top of the page. I need it to be in the correct position (next to the content) and then start scrolling with at it's current position with the content.
I'm trying to get my sidebar to scroll like this one here -> http://getbootstrap.com/2.3.2/components.html
The website is http://www.katyasarmiento.zzl.org (a free hosted site for now)
OLDER
I'm having a really hard time with this. I've looked up everything I could and I still can't figure it out. I got it to work for a while with a tutorial I found, but it didn't work well with ScrollSpy. So I'm trying to use Bootstrap's Affix.
I'm new to javascript / jquery so if anyone could look over my website and check to see what I'm doing wrong.
The ScrollSpy is working right now I think, I just can't get the sidebar to scroll with the page.
ALRIGHT I got it to work!
What I did was change the following...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix-top">
To...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200">
So I put the data-spy and data-offset on the "bs-docs-sidenav" class, changed the script to that class also instead of the "bs-docs-sidebar" class.
Then I edited the css of "affix-top", "affix", and "affix-bottom" and it works very well :)
My original problem was referring to the sidebar class instead of the sidenav class, because that's what my affix CSS was working on.
Hope this helps anyone that was having a similar issue to mine :)
What helped me with this were these tutorials.
In ul element on your page you have written-
<ul class="nav nav-list bs-docs-sidenav">
Where you have used nav nav-list bs-docs-sidenav classes add one more class affix-top. Then it will be -
<ul class="nav nav-list bs-docs-sidenav affix-top">
And remove the class affix-top from this line, which is the parent node of your ul element-
<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix">
And write this line like-
<div class="bs-docs-sidebar span3">
I've gotten Bootstrap running on my site successfully but I'm trying to use the navbar-top-fixed functionality and whenever the page loads it pushes everything down about 20 pixels and I can't seem to diagnose why.
My code for the nav-bar is this:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container protected">
<ul class="nav pull-right nav-pills">
<li>Login</li>
<li><i class="icon-shopping-cart icon-white"></i> View cart <span class="badge badge-warning">2</span></li>
</ul>
</div>
</div>
</div>
And the page at this link will load the page properly, and then when it loads the page it pushes it down like this screenshot.
Has anyone seen this before or know any quick fixes? I am customizing one of the nav-bars on the page using lessCSS.
Please move the navbar markup in front of the "container" div. The "container" class has this margin defined.
See here: http://postimage.org/image/nu5pv8tkz/