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.
Related
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
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 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>
At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}
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
}