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;
}
Related
I have a nav bar, in which some links are provided. For ease's sake, I've only included one link in the code below. This navigation bar's height is automatically determined by the font-size used by the links. Now here's my problem: I want to add an img to the bar, that fills up the bar, however big it may get because of the links.
This is for a mobile website. Now I may be noob in this area, but I've noticed that smartphone browsers handle a website way differently than desktop browsers scaled down. Following that logic, I don't want to hardcode the size of the elements because it might scale weirdly on other devices. I want everything to be determined by one value, if possible.
I've read some things about display: flex; but truth is, I can't figure out how it works. I've tried setting the height of the img to 100% but since the height of the nav is by default auto and thus set by the font-size of the links, that doesn't work.
HTML:
<nav>
<img src="/include/img/logo/flame.svg" alt="info"/>
Link
</nav>
CSS: (only positioning/scaling properties included, so no colors etc.)
nav {
display: flex;
padding-left: .5%;
padding-right: .5%;
}
nav a {
padding: 10px;
float: left;
font-size: 4em;
}
I want it to look like this (image height manually set in pixels)
But of course, it looks like this (sorry, can't post pictures yet)
(the image has some white space beneath it, which is 'to be fixed')
Any ideas? I can't be the only one who has ever had this issue.
I'm having a difficult time getting a NavBar to render what I have in mind.
I need a navbar with an increased height (reason because my brand image has a bigger height than the default).
But I also need all menu elements (BUTTON, LI, A, FORM ELEMENTS, NAVBAR-TEXT, NAVBAR-RIGHT) to respect the new height and to properly vertically center in the navbar.
Can someone provide some example HTML/CSS for what needs to be changed?
I have done lots of searching online and there seems to be nothing obvious.
The BootStrap site shows documentation on how to define a navbar, but nothing that I could find regarding height changes.
If you are putting your brand image within the navbar-brand div then you can change the height to the height you need (or height of the brand image) using css:
.navbar-brand {
height: 80px;
}
To align the navbar elements vertically you can give the navbar a top margin to what you need also using css:
.navbar-nav {
margin-top: 40px;
}
You will have to use css breakpoints if these need to be changed for smaller devices.
so I made a navbar and I have carousel slider, I can't put the navbar on top of it (not fixed) I don't need the navbar to take space
here's an example of what I'm talking about: http://demo.designshopify.com/html_lavie/lavie_resturant/index.html
I tried to change the css to:
.navbar {
position: absolute;
z-index:1;
width: 100%;
text-align: center;
}
but still the navbar not on top..
Simple just add the class
navbar-static-top
along with the navbar class,
I think You should read the bootstrap docs http://getbootstrap.com/getting-started/
If you don't want the navbar to take up space, and want it to overlay the content, use the fixed navbar..
navbar-fixed-top
http://www.codeply.com/go/xp2fY6sVHP
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.