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.
Related
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 created a little site tonight about watches. You can visit it at horology dot info.
(Please do not post the actual URL of my site in your response.)
I was wondering why the dropdown menu -- which I got from https://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ -- appears in id="content" rather than id="banner" (with the blue background). I want the menu to appear underneath the logo text with the blue background. Additionally, does anyone know why there is a lot of vertical space before the banner? I also want less empty vertical space at the top. By the way, I am using Firefox on Ubuntu Linux.
Add display property (display: inline-block;) to your #banner class in "/horology.css"
#banner {
width: 800px;
background-color: #00C;
display: inline-block;
}
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 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/
I've tried numerous methods but I cannot get the logo and the li elements to align properly in the header.I also cannot seem to increase the height of the header.I've tried different methods but no success.
Basically what I want is first to increase the header's size (I have a navbar-static-top header) and make the logo and the ul elements appear properly.However I have no ideea how I can do that.I also want to keep the logo's current dimensions.It does work with the current header if I resize the logo but that's not what I am after.
Bootply
[1]: http://www.bootply.com/BTSfbDudpZ
Add following css
.navbar-brand {
height: auto;
}
.navbar-nav{
margin-top: 50px;
}