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>
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'm a newbie to html and css, and I was wondering if this is possible in pure css.
So I made 3 divs, all fitted perfectly to my screen size. What I am wondering is if you make the "Menu" fixed so it scrolls along, can you change the starting position of it?
<div class="red"></div>
<div class="blue">
<h1>Menu</h1>
</div>
<div class="green"></div>
This is the CSS that goes along with it:
.red{
background-color: red;
width: 100%;
height: 1080px;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
}
So what I basically mean is can "Menu" be fixed from when I scroll across the blue div and downwards while it's not visible yet on the red div? (so the 'starting position' of it is actually on the blue div)
Sorry if the question is poorly explained, english is not my native language. Thank you in advance.
You can just hide "Menu" on red and green divs using z-index.
CSS:
.red{
background-color: red;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
z-index:1;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
z-index:2;
}
Example: http://jsfiddle.net/3k3wyscL/
But with this solution problematically would be to add another text visible only on red or green div.
Edit: as you want to see "Menu" on green div too, you can delete green class z-index and position parameters in css.
I know you mentioned you want the solution in pure css, but if you would like to use JQuery that will be a solution.
make the menu absolute:
.persist-menu
{
position: absolute;
}
right a function to update the position of the menu
function UpdateMenuPosition() {
var el = $(".blue"),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".persist-menu", el)
if (scrollTop > offset.top) {
floatingHeader.css({top:(scrollTop)});
} else {
};
}
and call it while scrolling
$(function() {
$(window)
.scroll(UpdateMenuPosition)
.trigger("scroll");
});
Check the demo: http://jsfiddle.net/wfff74w9/4/
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.
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
}