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.
Related
I'm making a basic website with a dropdown menu for switching languages. I can't seem to make the dropdown appear outside of the navigation div even after trying with overflow: visible !important; as suggested in other threads. Instead my dropdown menu appears inside the navigation bar as shown below:
The codepen for this example is https://codepen.io/mattiasjohnson/pen/VwbZbVm
Solution (edit):
As per s.kuznetsov's comment adding position: absolute to .lang-switch-hidden solved the problem.
Problem
Hi. That behavior of your navigation div is because you don't set its height propriety with a precise value. By default, height's value is auto. Because of that, when the .lang-switch-menu's height grows, the navigation div' height grows to avoid overflow. If you set the navigation div's height in a precise value like 2rem, you can see that it won't grow anymore.
Solutions
Set the navigation div's height precise :
#navbar {
color: black;
background-color: #f1f1f1;
margin-top: 1.5em;
height: 2rem ;
}
NB : By precise value I mean a value who don't tell the navigator to calculate its height according to his content like : fit-content or auto.
2.This code, add at the end of your css, can give you another way to solve the problem.
.lang-switch-menu{
position:relative;
}
.lang-switch-hidden{
position:absolute;
}
I'm working on a personal website template but I can't style the image and the text in the navbar.
I want to fix the aspect ratio of the image to center the navbar, so independently from the height of the navbar, the image will always look the same.
I want to center the text vertically
Make CONTACT into Contact
I'm not using boostrap or other frameworks.
You should check the flex box property, this is really useful. Here is some documentation on the subject and here is an example on how to build the layout you want using flex box.
1.- I didn't understand this one, you want to 'fix the ratio' but the ratio is already fixed and you can change the size of it using percentage on height and width.
2.- Add the next lines to the navbar css:
display: flex;
align-items: center;
that will center vertically all the elements in your navbar, including the image.
3.- Try this:
.navbar li:last-child a {
text-transform: lowercase;
}
or text-transform: capitalize if you want the first letter capitalized.
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'm using Bootstrap and a navbar with navbar-fixed-top class on it.
Below that is a div with an image inside (full width of the screen, height 400px).
The problem is that, since my navbar has a background-color, the navbar goes onto the image. I tried to add a margin-top:80px on the image, it works fine, but when I go below 769px x XXXpx, a space appears between my navbar and my image. I know this space is coming from the margin-top when resizing the window, but what could I do to set the image below the navbar without adding a margin-top for it to appear correctly ?
I thought this was simple issue so I didn't add code to my post, I will if needed.
Try to wrap CSS rule for image in
#media (min-width: 768px) {
your CSS rule for image margin-top: 80px here
}
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;
}