I tried the solution for SlickNav fixed header here:
How to make a fixed header with SlickNav
This works, but I then have a problem: my lengthy SlickNav menu list can no longer scroll, it stucks at bottom of the screen. Is there a solution?
Thank you.
Edit:
My changes from original slicknav package to reproduce the problem:
1) Add to dist/slicknav.css after the line 78 (.slicknav_menu) the following lines to get fixed header:
/* change to make sticky menu */
/* but this overrides top of each page, to fix */
/* also the whole menu could no longer be scrolled! */
/* https://stackoverflow.com/questions/19854185/how-to-make-a-fixed-header-with-slicknav*/
display: block;
position: fixed;
width: 100%;
top: 0;
2) Add a very long menu item list to demo/index.html after Parent 2, item 7 (line 39) :
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
<li>Added item First</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item 1</li>
<li>Added item Last</li>
</ul>
Now when you use mobile mode, the last item line "Added item last" cannot be seen since the menu list is to long and is no longer scrollable as it was before setting the fixed header in 1).
Incidentally by searching I found that other user had similar problem :
How to make a fixed header with SlickNav
Related
I set up a simple css based dropdown navigation.
The last category of the main navigation (named login) is supposed to look different from the rest, hence I simply applied a different style via last-of-type.
However the style now gets applied to the drop-down menus as well, meaning the last item of the dropdowns have said style applied also.
(Also, I cannot target them with nth-... selector since there will be new categories added / removed every once in a while.)
How would I stop this form happening?
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <-- unfortunately different style also...
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <-- different stlye
</ul>
If you use a wrap for your unordered lis you can use something like this
<div class="test">
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <!-- unfortunately different style also...-->
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <!-- different stlye -->
</ul>
</div>
So the CSS
.test > ul > li:last-of-type{color:red;}
set style only for the first ul after div.test and doesn't affect the other nested elements
Codepen
Here is my problem is there a way to wrap WordPress UL submenu to div?
WordPress output is this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</li>
</ul>
And I need to get this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<div class="wrap">
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</div>
</li>
</ul>
Using $.fn.wrap:
$('.sub-menu').wrap('<div class="wrap">');
I have a multi-level horizontal menu with unknown number of top level and sub level menus. I want to display this menu as a single line and display as many as the display width will allow. I'm planning to then put all the menu items in a modal dialogue box which the icon is right justified in the menu.
I'm using zurb foundation 5 and I need the menu to cater for different screen widths but I'm 99.9% certain this is a css problem, not foundation. (ie I don't want to code for medium/large/xlarge)
My problem is that I'm having trouble limiting the menu to a single level. It spills/overflows onto subsequent lines but if I specify a height and overflow:hidden, it then breaks the multi-level sub levels of the menu.
I've created a jsfiddle here http://jsfiddle.net/gavtwtd/4tkpoL74/6/
but please note you may have to widen the result pane to see the problem.
Ah, I must accompany jsfiddle with my code, so here's some code:
<div class="sticky">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li>☰</li>
</ul>
<ul class="left" style="width:90%;">
<li class="has-dropdown">Menu 1
<ul class="dropdown">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
<li>Sub menu 4</li>
<li>Sub menu 5</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 99</li>
</ul>
</section>
</nav>
</div>
<div id="myModal" class="reveal-modal" data-reveal>full menu here <a class="close-reveal-modal">×</a></div>
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
This question already has answers here:
How do I remove a specific bullet point within a ul in CSS?
(2 answers)
Closed 9 years ago.
Let's say as an example, I have two lists.
1st:
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
</ul>
2nd:
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
</ul>
I'd like to remove the list-style (just the icon) from TEST 4 in the first list and the list-style (again, just the icon) from TEST 3 from the second list.
How can I achieve this?
Working jsFiddle here.
Using nth-last-child(2) is one option, as shown here.
li:nth-last-child(2) {
list-style-type: none;
}
<ul>
<li>TEST 1</li>
<li style='list-style-type:none;'>TEST 2</li>
<li>TEST 3</li>
</ul>
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li style='list-style-type:none;'>TEST 3</li>
<li>TEST 4</li>
</ul>