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.
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 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.
Dear all geniuses out there,
I'm building a website in wordpress, however I'm not an expert in it.
I'm looking to make logo bigger and put it between the header and the first part of the slider (with same position on the right as now, however way down on the menu so that half part of logo is within the menu and half part within the first part of the slider, making it not affect the height of the header menu)
The website in question is the following: http://www.ildottoredellepiante.it
I'm sure this is possible as I've seen it on few website, does anybody can help me with the answer?
Do you have something like this in mind?
Screenshot with modified CSS
To achieve this, just add this code to the id #site-logo in the style.css of your wordpress template:
#site-logo {
float: left;
position: absolute;
top: 12px;
}
position: absolute helps, that the size of the logo container does not affect the height of the header.
top: 12px helps to adjust the vertical position of the logo. You can alter that value to change the exact position of the logo.
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;
}
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.