I'm working on CSS on webshop https://amres.manoverskis.lt/. And having a bad time with the menu bar. First of all, I can't centre it out. And the 2nd problem I have is that when you hover on the first menu item (PAVEIKSLAI) sub-menu appears and the first item in that menu is more left than the 2nd one. I can't seem to find what is wrong with it.
Thanks.
Try to add:
#hor-menu {
display:flex;
justify-content:center
}
and
#hor-menu>.grid_60 {
display:flex;
justify-content:center
}
to center the menu
and to remove the left gap in sub-menu, reset margins in ul:
.fs2 {
margin:0;
}
Add:
#hor-menu {
padding-left: 25%;
}
and change the class of UL for the second submenu (fs2 grid_12 omega submenu-2-column submenu-2-column-2) to > (fs2 grid_12 alpha submenu-2-column submenu-2-column-1)
I have created 2 examples for you. I hope it'll help you out.
1 - If you want navigation left align in your content area.
#hor-menu {
display: flex;
justify-content: center;
}
2 - If you want the navigation to align in the center on your screen.
#hor-menu {
display: flex;
justify-content: center;
}
and changes grid class name in your HTML from <div class="grid_60"> to <div class="grid_0">.
#main-menu { /* center menu */
display: flex;
justify-content: center;
}
#content-wrap ul#main-menu li a {
text-align: left; /* fix menu item */
}
To center menu you can simply make it flex, now most browsers support it.
And in your navigation second item was just aligned center so it looked like margin.
Related
I am coding a design I found for practice and am trying to get the logo in the center of the navbar like in the dribble link.
https://dribbble.com/shots/4424634-MIFESTIVAL-Home-Page/attachments/1005722
There are 4 items on the left, and only two on the right. I originally had them all floated left and couldnt figure it out, so I tried flexbox, because I found this tip: https://stackoverflow.com/a/21862333/7723283
This only works if I have an even amount of items in the navigation. I am also wondering if I am okay including all those items as normal navigation instead of buttons or something. This css is basically the same as the link above, so my nav items are all positioned equally. But I need the logo in the center. I feel like there is something easily to be done with flexbox, but this is the first time I have used it.
nav{
display:flex;
width:100%;
height:20%;
background:#eee;
align-items:center;
justify-content:center;
}
nav a {
text-decoration:none;
color:black;
margin: 0 30px;
}
#logo{
width: 200px;
height:100%;
background:rgb(126, 232, 163);
}
<nav>
Menu icon</li>
Search icon</li>
Plan Your Trip</li>
Experience</li>
mifestival</li>
Tickets</li>
Line-Up</li>
</nav>
Here's a pretty simple restructure to get you started:
We'll wrap up the chunks of your menu into three distinct parts (left side, middle/logo, right side)
<nav>
<div class="leftSide">
Menu icon
Search icon
Plan Your Trip
Experience
</div>
<div class="logo">
mifestival
</div>
<div class="rightSide">
Tickets
Line-Up
</div>
</nav>
And for the CSS we'll add in this:
.leftSide {
width: calc(50% - 100px);
display: flex;
justify-content: center;
}
.rightSide {
width: calc(50% - 100px);
display: flex;
justify-content: center;
}
I'm working on a Navbar for my website and I noticed that if I had the links on the right using float: right they would reverse the order. I thought that I could reverse them back by using Flexbox's
flex-direction: reverse-row. This does not appear to work though?
Here's the code that should be responsible for re-reversing this effect:
.headerItem {
display: block;
padding-left: 7px;
padding-right: 7px;
float: right;
display: flex;
flex-direction: row-reverse;
}
Any hints/help?
float property is not part of flex. This will prevent it from doing what it is suppose to, because you are forcing it to float to right. Flex has its own way of doing that. its called justify-content - flex-start, flex-end, center, space-between and space-around. Try which one works for you.
Ok, so I found the answer. #jmag has provided some useful info, and some further Googling helped as well. The new navbar looks like this:
<div id="header">
<span id="headerLogo">XaafCode</span>
<div id="navbar">
Home
Portfolio
Contact me
</div>
</div>
In the CSS I have this now, which easily fixed it:
#navbar, #header { justify-content: space-between; }
From all my searches I seem to be using the right technique but the centering just isn't happening.
This is the code block from my .html file:
<div id="section-movement" class="section-container">
<div class="section-title">
Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span>
</div>
</div>
This is the entries in my .css file:
.center {
text-align: center;
}
.float-right {
float: right;
}
The output should be the word 'movement' left aligned, the text 'click entries for more details', should be centered and the text 'limited by movement speed' should be right aligned. The left and right text work fine but the 'click entries for more details' text is not centering, it just immediately follows the 'movement' text.
span is an inline element by default. The way you use centering is inside a span element, which doesn't do anything since it's inline.
You can use <div>s instead of <span>s, which are block elements (default width: 100%), but I don't know if this is what you imagine - in your current code you are trying to center some words which basically are part of a text paragraph...
It seems you want to distribute three parts of a sentence left, middle and right. You can put all three parts into DIVs or SPANs (in this particular case it won't matter since they all become flex items by the flex definition of their container) and add this rule for their parent element:
.section-title {
display: flex;
justify-content: space-between;
}
Here's the complete code:
.section-title {
display: flex;
justify-content: space-between;
}
<div id="section-movement" class="section-container">
<div class="section-title">
<span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span>
</div>
</div>
I'm pretty sure you can just use the center tag...?
So it would be:
<'center>
...Content you want centered...
<'/center>
But without the apostrophe's.
Try something like this.
I made a minor update to your HTML and put the word "Movement" in a span that I floated left. I floated the span with a class of right to the right and added text-align: center to the div with a class of section-title that centered the span with a class of center.
Note that you don't need a text-align: center rule on the div with a class of center.
.section-title {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
https://jsfiddle.net/eulloa/k7LL0byt/1/
I was trying to create my portfolio page. I have 4 subheadings (About, Resume, Blog and Portfolio).
So I wanted to put these headings on top center of my div. So what I did was created an unordered list gave it property to display inline. Now all headings come to the same list.
Now I want to give spacing between the headings. Of course margin and padding options are there but is there any way in which I can avoid margin/paddings and do this directly by flex?(I wanted to reduce load on media queries for small screen)
The ul can be the flex container, and you can spread the elements evenly using justify-content: space-between:
.header {
display: flex;
width: 50%;
margin: 0 auto;
padding: 0;
justify-content: space-between;
list-style: none;
}
<ul class="header">
<li class="header__item">About</li>
<li class="header__item">Resume</li>
<li class="header__item">Blog</li>
<li class="header__item">Portfolio</li>
</ul>
you may use justify-content and eventually pseudo elements to squeeze elements to middle
nav {
display:flex;
justify-content:space-around;
}
/*increase space from side at first and last child */
nav:before,
nav:after {
content:'';
width:25vw;/* or % . tune this or remove pseudo if unneeded */
}
a {
margin:0 1em;
}
<nav>
About
Resume
Blog
Folio
</nav>
This simple page is giving me headaches. Site structure is simple: nav bar as head and the main content area is comprised by a big image and two paragraphs; and a footer at the bottom —that's all.
I've got the following problems:
part of that drop-down menu appears behind the big image(1135x307). I want it to appear on the front.
the nav bar items are not positioned evenly. I want them to appear evenly on top of the image below.
the footer needs to go further down even when there's not much content in the main content area. I don't know how to make this happen.
Here's the link to the html and css code: http://jsbin.com/loponi/1/
Any help would be much appreciated!
Try adding z-index on your ul :
.topNav ul {
display: inline-block;
list-style: none outside none;
padding: 0 20px;
position: relative;
z-index: 1;
}
UPDATED
I dont know how it is but try to make these changes:
Wrap your contents paragraph inside a div:
<div class="contentArea">
// all <p class="content">
</div>
CSS:
.contentArea { width: 1135px; min-height:500px;height:auto;}
.content {
width:100%;
}
.footer{
bottom:0;
}
Hope this will help you..
CHECK THIS
Image in your JSBIN is not working...
But you can try to add position: relative; to your nav.
If this doesn't help, set z-index for your nav as well.