I added a horizational menu in a header of WordPress within a <nav id="hoz-menu"> I have no idea which CSS statement make the menu exceed the block. It is supposed the CSS of the menu is responsive.
Demo can be found from http://jsfiddle.net/yckelvin/nqx2a1ao/
Here is the screen capture of the Chrome debug http://screencloud.net/v/Ernf
Below is HTML code of the menu
<nav id="hoz-menu">
<ul id="hoz-menu" class="topmenu">
<li class="topfirst"><span>Item 1</span>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul></li>
<li class="topmenu"><span>Item 2</span>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul></li>
<li class="topmenu">Item 3</li>
<li class="topmenu">Item 4</li>
<li class="topmenu">Item 5</li>
<li class="topmenu">Item 6</li>
<li class="toplast">Item 7</li>
</ul>
</nav>
the width of <nav id="hoz-menu"> is 420px and CSS is
{
display: block;
}
CSS of <ul id="hoz-menu" class="topmenu">
#hoz-menu ul#hoz-menu, ul#hoz-menu ul {
margin: 0;
list-style: none;
padding: 0;
background-color: #dedede;
border-width: 1px;
border-style: solid;
border-color: #5f5f5f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Related
I can't seem to wrap my head around this. I'm working on an (existing) menu structure. The current menu never intended the amount of sub-items we have, and as such it overflows from the viewport. Since its sticky some items aren't accessible which is problematic. Since flexbox has an issue where the flexbox itself doesn't adjust its width when wrapping columns, the background of the sub-menu doesn't continue. Again problematic since floating text, over other text, is annoying. Having read up on it, it appears the writing-mode solution is mostly used. However when I try to apply it, it still gets a singular row since the header element has to have position: fixed attached to it.
example to clarify:
html:
<header>
<div class="wrapper">
<ul class="parent">
<li class="child">Menu item 1</li>
<li class="child">Menu item 2</li>
<li class="child">Menu item 3
<ul class="sub-parent">
<li class="sub-child">Sub item 1</li>
<li class="sub-child">Sub item 2</li>
<li class="sub-child">Sub item 3</li>
<li class="sub-child">Sub item 4</li>
<li class="sub-child">Sub item 5</li>
<li class="sub-child">Sub item 6</li>
<li class="sub-child">Sub item 7</li>
<li class="sub-child">Sub item 8</li>
<li class="sub-child">Sub item 9</li>
<li class="sub-child">Sub item 10</li>
<li class="sub-child">Sub item 12</li>
<li class="sub-child">Sub item 13</li>
<li class="sub-child">Sub item 14</li>
<li class="sub-child">Sub item 15</li>
<li class="sub-child">Sub item 16</li>
<li class="sub-child">Sub item 17</li>
<li class="sub-child">Sub item 18</li>
<li class="sub-child">Sub item 19</li>
</ul>
</li>
<li class="child">Menu item 4</li>
<li class="child">Menu item 5</li>
<li class="child">Menu item 6</li>
</ul>
</div>
</header>
<div class="content">
Sub-items should wrap till end of viewport
</div>
css:
header{
position: fixed;
top: 0;
}
.wrapper{
background: #8AB9B5;
}
.parent{
display: flex;
background: #C8C2AE;
list-style: none;
width: 100vw;
}
.child{
margin: 0.5em;
}
.sub-parent{
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 80vh;
background: #D0CDD7;
position: absolute;
margin: 0;
list-style: none;
padding: 0;
writing-mode: vertical-lr;
}
.sub-child{
background: #ACB0BD;
display: block;
margin: 0.5em;
writing-mode: horizontal-tb;
}
.content{
margin-top:100px;
}
https://jsfiddle.net/Tristanschaaf/7pd504hj/99/
Current result:
Expected/wanted result:
It's possible that the sub-items also have a sub-item structure.
I can't seem to find a way to make the flexbox to see it can expand vertically. Additionally there is an issue in Firefox on which the height seems to be initially set to 0 until a viewport resize is triggered.
I am very aware that this structure can cause it's own UX issues but I'm not here to discuss those, as per usual, the impact of that impacts other sides of the business as well and I cannot change it for now.
You have to just remove writing-mode: vertical-lr; property from .sub-parent element and just need to give fix-width to this element width:200px;.
Not sure this what exactly you needed or so,
But what i did is gave some width(200px here) to .sub-parent ul and also some width(fit-content here) to it's children li and then removed/commented one or two from your code to make it look like this. If any doubt do ask
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
header{
position: fixed;
top: 0;
}
.wrapper{
background: #8AB9B5;
}
.parent{
display: flex;
background: #C8C2AE;
list-style: none;
width: 100vw;
}
.child{
margin: 0.5em;
}
.sub-parent{
display: flex;
/* flex-direction: row; */
flex-wrap: wrap;
/* max-height: 80vh; */
width: 200px;
background: #D0CDD7;
position: absolute;
margin: 0;
list-style: none;
padding: 0;
justify-content: center;
/* writing-mode: vertical-lr; */
}
.sub-child{
width: fit-content;
background: #ACB0BD;
display: block;
margin: 0.5em;
writing-mode: horizontal-tb;
}
.content{
margin-top:100px;
}
</style>
<body>
<header>
<div class="wrapper">
<ul class="parent">
<li class="child">Menu item 1</li>
<li class="child">Menu item 2</li>
<li class="child">Menu item 3
<ul class="sub-parent">
<li class="sub-child">Sub item 1</li>
<li class="sub-child">Sub item 2</li>
<li class="sub-child">Sub item 3</li>
<li class="sub-child">Sub item 4</li>
<li class="sub-child">Sub item 5</li>
<li class="sub-child">Sub item 6</li>
<li class="sub-child">Sub item 7</li>
<li class="sub-child">Sub item 8</li>
<li class="sub-child">Sub item 9</li>
<li class="sub-child">Sub item 10</li>
<li class="sub-child">Sub item 12</li>
<li class="sub-child">Sub item 13</li>
<li class="sub-child">Sub item 14</li>
<li class="sub-child">Sub item 15</li>
<li class="sub-child">Sub item 16</li>
<li class="sub-child">Sub item 17</li>
<li class="sub-child">Sub item 18</li>
<li class="sub-child">Sub item 19</li>
</ul>
</li>
<li class="child">Menu item 4</li>
<li class="child">Menu item 5</li>
<li class="child">Menu item 6</li>
</ul>
</div>
</header>
<div class="content">
Sub-items should wrap till end of viewport
</div>
</body>
</html>
You can try the below approach. you just need to set the width of .sub-parent class as per your requirement. (as of now I have set width:40%) and I have set flex-direction: column. and overflow: auto.
header {
position: fixed;
top: 0;
}
.wrapper {
background: #8AB9B5;
}
.parent {
display: flex;
background: #C8C2AE;
list-style: none;
width: 100vw;
}
.child {
margin: 0.5em;
}
.sub-parent {
display: flex;
flex-wrap: wrap;
background: #D0CDD7;
position: absolute;
margin: 0;
list-style: none;
padding: 0;
margin-right: 60px;
}
.sub-child {
flex: 0 10%;
background: #ACB0BD;
display: block;
margin: 0.5em;
writing-mode: horizontal-tb;
}
.content {
margin-top: 100px;
}
<header>
<div class="wrapper">
<ul class="parent">
<li class="child">Menu item 1</li>
<li class="child">Menu item 2</li>
<li class="child">Menu item 3
<ul class="sub-parent">
<li class="sub-child">Sub item 1</li>
<li class="sub-child">Sub item 2</li>
<li class="sub-child">Sub item 3</li>
<li class="sub-child">Sub item 4</li>
<li class="sub-child">Sub item 5</li>
<li class="sub-child">Sub item 6</li>
<li class="sub-child">Sub item 7</li>
<li class="sub-child">Sub item 8</li>
<li class="sub-child">Sub item 9</li>
<li class="sub-child">Sub item 10</li>
<li class="sub-child">Sub item 12</li>
<li class="sub-child">Sub item 13</li>
<li class="sub-child">Sub item 14</li>
<li class="sub-child">Sub item 15</li>
<li class="sub-child">Sub item 16</li>
<li class="sub-child">Sub item 17</li>
<li class="sub-child">Sub item 18</li>
<li class="sub-child">Sub item 19</li>
<li class="sub-child">Sub item 20</li>
<li class="sub-child">Sub item 21</li>
<li class="sub-child">Sub item 22</li>
<li class="sub-child">Sub item 23</li>
<li class="sub-child">Sub item 24</li>
<li class="sub-child">Sub item 25</li>
<li class="sub-child">Sub item 26</li>
<li class="sub-child">Sub item 27</li>
<li class="sub-child">Sub item 28</li>
<li class="sub-child">Sub item 29</li>
<li class="sub-child">Sub item 30</li>
<li class="sub-child">Sub item 31</li>
<li class="sub-child">Sub item 32</li>
<li class="sub-child">Sub item 33</li>
<li class="sub-child">Sub item 34</li>
<li class="sub-child">Sub item 35</li>
<li class="sub-child">Sub item 36</li>
<li class="sub-child">Sub item 37</li>
<li class="sub-child">Sub item 38</li>
<li class="sub-child">Sub item 39</li>
<li class="sub-child">Sub item 40</li>
<li class="sub-child">Sub item 41</li>
<li class="sub-child">Sub item 42</li>
<li class="sub-child">Sub item 43</li>
</ul>
</li>
<li class="child">Menu item 4</li>
<li class="child">Menu item 5</li>
<li class="child">Menu item 6</li>
</ul>
</div>
</header>
<div class="content">
Sub-items should wrap till end of viewport
</div>
I am trying to make a mega drop down menu. I just want to second list items to stack up like a simple list but they hide behind one another. I don't know where I am make the mistake.
nav div .main-ul li{
display: inline-block;
}
.sub-ul li{
display: block;
position: absolute;
}
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
Just stack up the sub menu item with css.
Please try this.
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
CSS
div .main-ul li {
display: inline-block;
position: relative;
border: 1px solid red;
}
div .main-ul li > .sub-ul {
display: none;
position: absolute;
top: 20px;
left: -1px;
padding: 0;
}
div .main-ul li:hover > .sub-ul {
display: block;
}
div .main-ul li > .sub-ul > li {
white-space: nowrap;
}
JsFiddle
In bootstrap, it is as simple as:
<ul class="list-inline">
<li>...</li>
</ul>
I'm wondering how can it be done materializecss without using <nav> ?
Alternativey, you can just copy the bootstrap style:
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="categories-container pin-top" style="top: 0px;">
<ul class="categories db">
<li class="k">All</li>
<li>Polygon</li>
<li>Big Bang</li>
<li>Sacred Geometry</li>
</ul>
</div>
here you go -> https://themes.materializecss.com/pages/demo
also you can use class .row
I have an inline menu of which I want to change the last menu item so that it is a different coloured box with a different coloured text. I've managed to do this with the below class but I can't seem to work out how to change the hover state no matter what I've tried. How do I script that? Thanks.
#navbar a.blogbox {
background-color: #E4E9E7;
padding: 3px;
margin-left: 4px;
border-left: none;
text-transform:uppercase;
font-weight: bold;
color: #c52a45;
}
<div id="navbar">
<ul>
<li class="activepage">HOME</li>
<li>about us</li>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>contact</li>
<li><a class="blogbox" href="/blog/index.php">Blog</a></li>
</ul>
</div>
Is this what you want to happen?
#navbar a.blogbox {
background-color: #E4E9E7;
padding: 3px;
margin-left: 4px;
border-left: none;
text-transform:uppercase;
font-weight: bold;
color: #c52a45;
}
#navbar a.blogbox:hover {
color: green;
}
<div id="navbar">
<ul>
<li class="activepage">HOME</li>
<li>about us</li>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>contact</li>
<li><a class="blogbox" href="/blog/index.php">Blog</a></li>
</ul>
</div>
I have the following code that will change the state of a button when the text is changed, Even though the back style is applied successfully the color of the text will not change.
Code:
.links li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
}
.links li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Check the sample. I made two samples- one with tag and one without.
<ul class="links1">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
<ul class="links">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
http://jsfiddle.net/es_kaija/rx3avr7r/