I have created a mobile version of my site with a hamburger menu.
The close icon and hamburger icon are not responding to media query selectors and neither can be made visible on top of the mobile menu.
.nav-open is to be applied to the .page-header by Javascript to open the mobile menu.
**Html:**
<header class="page-header">
<a href="index.html" class="menu-logo">
<img
src="images/header.footer/logo.png"
alt="Easy Eddy's Tree Service Logo"/>
</a>
<nav class="menu">
<ul class="menu-list">
<li>Home</li>
<li>Our History</li>
<li>About Us</li>
</ul>
</nav>
<button class="menu-btn">
<svg
class="icon-mobile-nav"
name="menu-outline"
</svg>
<svg
class="icon-mobile-nav"
name="close-outline"
</svg>
</button>
**
css:**
.page-header {
position: relative;
}
.menu-btn {
display: none;
border: none;
background: none;
cursor: pointer;
align-self: center;
}
.icon-mobile-nav[name="close-outline"] {
display: none;
}
**Media query css:**
.menu-btn {
display: block;
}
.menu {
background-color: rgb(189, 189, 189);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
grid-column: 1 / -1;
/* flex-direction: column; */
transform: translateX(100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.5s ease-in;
pointer-events: none;
visibility: hidden;
z-index: 1;
}
.nav-open .menu {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translateX(0);
}
.nav-open .icon-mobile-nav[name="close-outline"] {
display: block;
}
.nav-open .icon-mobile-nav[id="menu-outline"] {
display: none;
}
}
the selectors at the bottom of media query are having no effect. - those reading .nav-open at the beginning.
Removing z-index from the page header did nothing to change visibility of menu icons
Changed "name" attribute on html and selectors to "title" and "id" - no change
changed the svg elements(which are hidden due to their size) to script-inserted icons- no change
edited .menu-btn style to display: block which only made the hamburger visible all the time(except when the menu was opened.
-changed the svg elements to p elements with text- no change in functionality
Related
I cannot use text align to move the pages in the navbar to the right while using display: inline-block.
https://www.w3schools.com/w3css/tryw3css_templates_architect.htm
I want to only use display: inline-block to make a navbar like the one shown in this link (the logo to the left and the pages/links to the right)
You can wrap the page links in their own element and position that element absolute to the right.
In the snippet below I use a <ul> for the page links and position it to the right.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul, li, a {
display: inline-block;
}
ul {
position: absolute;
right: 0;
padding: 0;
margin: 0;
}
a {
padding: 10px;
background-color: lightslategray;
color: #fff;
text-decoration: none;
}
<nav>
<b>BR</b> Architects
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
The element in the image is styled using absolute positioning but when I resize the screen I have to slightly adjust the positioning of both the 'For Sale' element and the '$400,000' element so I am curious as to if there is a way to achieve the same layout using flexbox?
Here is my attempt (https://codepen.io/ob98/pen/eYVPJLJ)
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
css:
.container{
display: flex;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1{
align-self: flex-start;
}
.item2{
align-self: flex-end;
justify-self: flex-end; /* If align-self moved this to the bottom of the container vertically, I am thinking that this should move it to the end/right side of the container horizontally, but that is not working */
}
Just went to https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self and saw that "In flexbox layouts, this property is ignored (more about alignment in Flexbox)", so I guess that explains why that is not working but I don't really understand why this property is being ignored... Anyway, is there a way to achieve this layout using flexbox or do I have to stick to absolute positioning? Thanks for any input.
Add to .container the declaration justify-content: space-between, to make both your p go to the container edges, and that's done!
.container {
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: flex-end;
justify-self: flex-end;
}
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
Adding justify-content to container and just using the item2 class like this would help.
.container{
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item2{
align-self: flex-end;
}
Can be the answer but im not sure. When i ran it worked.
.bg-flex {
width: 100vw;
height: 100vh;
background-image: url('https://media.istockphoto.com/photos/the-city-of-london-skyline-at-night-united-kingdom-picture-id1312550959');
display: flex;
flex-direction: column;
}
.for-sale {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.k-400 {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
.example {
width: 300px;
height: 100px;
background-color: aqua;
}
<div class="bg-flex">
<div class="for-sale">
<div class="example">
</div>
</div>
<div class="k-400">
<div class="example">
</div>
</div>
</div>
The following code works well on Chrome, but on Edge the Sticky element is out of place
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Result in Edge:
I noticed that if I remove the box-shadow from the sticky component or the dir=rtl from the body. It all works as expected.
It appears to be a bug in Edge, and after one resize the window in e.g. jsFiddle, it corrects itself.
What Edge also does, with dir="trl" set on the body, it render the scrollbar on the left side of the viewport, which e.g. neither Chrome nor Firefox does.
A workaround could be to instead of swap position with dir=rtl on the body, use Flexbox's own order property, and then set the direction on the inner elements to control the flow.
Fiddle demo
Stack snippet
.main {
display: flex;
max-width: 1200px;
/*width: 100%; default /*
/*flex-flow: row nowrap; default */
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
order: 1; /* added, move last */
}
<body>
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Updated based on a comment.
After some more testing and research, trying to move the box-shadow, which obviously cause this issue, to an inner element such a pseudo, still offset the .sticky element.
So two simple solutions, so dir="rtl" can be kept on the body, is to either, using a pseudo, use an image to create the shadow, or, as in below sample, use the filter property.
Here I used a CSS trick to apply it only on Edge, but it can fully replace the box-shadow, and which way to go is more about how old browsers one need to support.
Fiddle demo 2
Stack snippet 2
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
/* CSS to target Edge only */
#supports (-ms-ime-align: auto) {
.sticky {
box-shadow: none;
filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
}
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.
There are some similar problems here but none of the solutions fit my situation. I've got a nav that needs to be centered. There is a sub nav in a UL that needs to be left-aligned to its parent LI and laid out horizontally. When I float the sub nav LI's left, the UL keeps the width of its parent LI.
I'd set a fixed PX but the sub nav needs to be expandable so that the client can add or remove nav items and keep the layout.
Here is my HTML:
<nav>
<ul>
<li>Who We Are
<ul>
<li>Our Approach</li>
<li>What We Do</li>
<li>Leadership</li>
</ul>
</li>
<li>Our Results
<ul>
<li>Case Study A</li>
<li>Case Study B</li>
</ul>
</li>
<li>Our Experience
<ul>
<li>Category Experience</li>
</ul>
</li>
<li class="current">What We Think
<ul>
<li>Articles</li>
<li>Category Insight</li>
<li>Research</li>
<li>Training</li>
</ul>
</li>
<li>News
<ul>
<li>Press Releases</li>
<li>Articles</li>
</ul>
</li>
<li>Connect With Us
<ul>
<li>Join Us</li>
<li>Find Us</li>
</ul>
</li>
<li><div class="search"><input name="searchbox" type="text" id="searchbox" class="input_style" value="SEARCH" onFocus="if (this.value == 'SEARCH') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'SEARCH';}"><button></button></div></li>
</ul>
</nav>
Here is my CSS:
nav a,
nav a:visited {
color: #888888;
text-decoration: none;
display: inline-block;
line-height: 30px;
}
nav a:hover {
color: #CCC;
}
nav a:active {
color: #FFF;
}
nav {
text-align: center;
}
nav ul {
display: inline-block;
position: relative;
z-index: 597;
}
nav ul li {
float: left;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 599;
line-height: 30px;
}
nav ul li ul {
display: none;
}
nav li.current a {
background: url(../img/nav_arrow.png) no-repeat center bottom;
color: #FFF;
}
nav li.current ul {
display: block;
position: absolute;
z-index: 598;
top: 31px;
left: 1px;
width: auto;
}
nav li.current ul a {
background: url(none);
color: #888888;
}
nav li.current ul li {
float: left;
display: inline-block;
}
nav .search {
height: 18px;
width: 84px;
padding-left: 4px;
background: url(../img/search_bk.png) no-repeat;
margin-left: 20px;
margin-top: 5px;
float: left;
}
nav .search input {
height: 14px;
width: 68px;
float: left;
background-color: transparent !important;
border-style: none;
}
nav .search input.input_style {
font-family: "proxima-nova", sans-serif;
padding-top: 3px;
color: #777777;
}
nav .search button {
height: 11px;
width: 10px;
float: left;
background-image: url(../img/search_btn.png);
background-color: transparent;
border-style: none;
background-repeat: no-repeat;
margin-top: 3px;
}
Here is a screenshot:
My Screenshot
Thanks in advance!
Just make the width of the sub-menu UL something ridiculous like width:2000px instead of width:auto; this way the items can float horizontally in the sub-nav ul.
Commonly a website menu isn't going to exceed the width of the page area so why does it matter if the sub-menu UL has a excessively large width? It's only meant to house your li elements which will float above any content.
I use this: http://matthewjamestaylor.com/blog/centered-dropdown-menus
So my sub menu ul looks like;
#centeredmenu ul ul {
display: none;
float: left;
left: 0; // important to keep menu left aligned to parent li element>
position: absolute;
right: auto;
top: 2em;
width: 1000px; // set to whatever you want //
}
#centeredmenu ul ul li {
display: inline-block; // not really needed
left: 0; // important
}