HTML elements misaligned with page zoom - css

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.

Related

Scrollbar does not appear with Materializecss extended navbar with tabs

I am using MaterializeCSS's extended navbar with tabs to display content on my static website. I copied and pasted the example code into my project files, and while it seemed to work fine initially on my screen, when I began resizing it, I noticed that some of the tab names would get cut off, and the scrollbar that the documentation says should appear when this happens does not display on my end.
<header>
<nav class="nav-extended navColor" role="navigation">
<div class="nav-wrapper">
BRAND
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs navColor">
<li class="tab"><a class = "active" href="#all">All</a></li>
<li class="tab">Really Long Name 1</li>
<li class="tab">Really Long Name 2</li>
<li class="tab">Really Long Name 3</li>
<li class="tab">Really Long Name 4</li>
<li class="tab">Really Long Name 5</li>
<li class="tab">Really Long Name 6</li>
<li class="tab">Really Long Name 7</li>
<li class="tab">Really Long Name 8</li>
<li class="tab">Really Long Name 9</li>
</ul>
</div>
</nav>
<ul class="sidenav navColor" id="mobile-menu">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</header>
codepen with materializecss and js: https://codepen.io/khw889ajv/pen/JjpvjEN
materialize tabs: https://materializecss.com/tabs.html
materialize navbar: https://materializecss.com/navbar.html

SlickNav Fixed header causes menu not scrollable

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

Is there a way to wrap UL sub-menu to div?

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">');

Responsive horizontal menu needs overflow hidden but how?

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>

Styling a stacked tab navigation in Twitter Bootstrap using a Bootbusiness theme

I am using a Bootbusiness theme in my Twitter Bootstrap website, and I am trying to create the stacked tab navigaton, as seen in the documentation of Bootstrap but whenever I try do it only appears as a List without style. And not styled as stacked button.
Here is my code in the HTML
<div >
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>

You need to have an anchor inside li to get the styles
Fiddle
<div>
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item </li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>

Resources