I have problem with positioning three elements in fixed top menu on my website. I want to look like that: logo on left site, sign in on right site and menu in the middle of navbar.
How should I do this right?
You can create this layout really easily with flexbox !
Here is an example: https://jsfiddle.net/7n1w4sn6/
Apply a display: flex; & justify-content: space-between; on the container of your menu.
Given that IE does not fully support flex-box, here's an alternative solution which is based on Mamboleoo's code, but uses float: left; and float: right; on the logo and sign-in link respectively: https://jsfiddle.net/vavx5heb/
Related
This is my site URL
In Inspect mode mobile view when I click on the last circle of heel, two circles appear on top of it. I want those two circles to appear at the center.
If I remove justify-content: space-between from the css, then those two circles appear at the center. However the first circle appears only partially in mobile view while scrolling horizontally. How to solve this problem?
Thanks
Add Justify Center to the div after .container height in style and mark it important
position: relative;
bottom: 215px;
justify-content: center !important;
After digging for quite a while i found the solution.
just give the container of the circles a padding left of 100px in the media query.
code :-
.row.align-center.justify-center {
padding-left: 100px;
}
Okay, so I am trying to make a responsive navigation menu for my website. I am currently having trouble making this dang float property work. So I've taken a combination of https://www.w3schools.com/ and a YouTube tutorial to make a website that I envision.
Here is what I got so far (Link to my code is below in hyperlink to JS Fiddle)
https://jsfiddle.net/dcannon96/e9mgsLqd/
So if you actually look in the label attribute under the media and screen section where the max-width begins for pixels.
Take a look at this part of my CSS.
label {
display: block;
cursor: pointer;
/* float: right; */
}
My goal is to make my top nav bar menu to appear beneath the hamburger icon when in mobile/tablet form. When in desktop mode, my menu list is on the left side of the screen, but when I am in mobile, the float right DOES NOT bring the rest of the items beneath the top nav bar.
This is what I'm trying to do https://youtu.be/xMTs8tAapnQ?t=611 (video skips to 10 minute and 11 seconds in)
So you can see what I am talking about once you remove the /**/ comment from the float right and see the different results.
you have to add overflow:hidden to the menu so the top nav bar menu to appear beneath the hamburger icon
see this https://jsfiddle.net/dow2qLck/1/
.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;
}
hi I uncommented the float:right property of .label and it was aligned to right.. Hope this what you're looking for. thanks
visit below link
https://jsfiddle.net/dow2qLck/1/777
I am a beginner in HTML and web design, and I am making a simple header for my website. I have a logo image aligned to the left using float left. I also have a simple navigation bar including all the other web pages that I have on my website in the header, and it is also aligned, this time to the right, with float right. However, the webpage displays not in the way I want it. Instead, it displays like this:
As you can see, the navigation bar and image are all floated to the right and left respectively, but the navigation bar is clearly below the image and the title, instead of being on the same horizontal block. How can I change this? I want the navigation bar to be directed right of the title and image. I tried using display: inline but it did not work.
Thanks in advance...
Forget float. Use flex
.header {
display: flex;
justify-content: space-between;
}
Read about CSS flex-box layout. It will speed up your work and make it more pleasant.
pls adding header class
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.
I can not get the menu div centered inside the header without changing the responsive menu structure.
I use a template from JA and the client wants to have the logo centered above the menu
I was able to get the logo centered within the main div but the menu is sticking to the left and i think i tried almost every possible solution.
here is the link to the site
http://dev.turnim.com/clients/antonio_j3/
Here is one option..
.nav-collapse.collapse {
text-align: center;
}
.t3-megamenu {
display: inline-block;
}
Tested in the browser.. it works.