How can i align the navigation in the DIV on the bottom perfectly?

HTML & CSS
1

Hello dear coders,

I really need some help here… sometimes i notice i am having problems in CSS. I am using Bootstrap 3 and i am trying to align the navigation perfectly to the DIV header… i don’t know how to do this i will past my code in HTML and CSS here and a image how i want it to look. Can anybody please help me just with this issue?

image how i need to archive the navigation: http://s21.postimg.org/4ew2eiglj/Naamloos.png
How it looks now: http://s28.postimg.org/c7etw2ubx/advice.png

Please help me!

    /* WPA Project Colors 
White           = #ffffff
Dark gray       = #414042
Darker gray     = #231f20
Light gray      = #bcbec0
Lighter gray    = #dcddde 
Blue            = #499ab4
*/

/* Import Fonts */
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,700);

/* WPA Global Style */
body {
    font: 400 18px 'Ubuntu', helvetica, sans-serif; 
    color: #222;
}

p {
    font-weight: 300;
}

h1, h2, h3, h4 {
    text-transform: uppercase;
}

a {
	color: #499ab4;
	text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
       -moz-transition: color .2s ease-in-out;
            transition: color .2s ease-in-out;
}

a:hover, a:focus {
	color: #414042;
	text-decoration: none;
}

/* end: WPA Global Style */


/* wpa-header */
.wpa-header {
    background: #dcdddf;
    height: auto;
bottom: 1;
left:0;
right:0;
position: fixed
}

.wpa-header h1 {
    font: 700 22px 'Ubuntu', helvetica, sans-serif; 
    color: #414042;
}

/* end: wpa-header */

.wpa-top-bar {
    margin: 20px 0px 20px 0;
}

.wpa-top-bar .fa {
    color: #231f20;
    font-size: 40px;
    text-decoration: none;
    vertical-align: middle;
    margin-right: 5px;
}

.wpa-top-bar p {
    font-size: 18px;
    font-weight: 700;
}

.wpa-top-bar span {
    color: #499ab4;
}

.wpa-top-nav {
    margin-top: 20px;
}


.navbar-default{
	border: none;
    background: red;
    border-radius: 0;
}

.navbar-default .navbar-nav>li>a{
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	padding: 11px 18px;
    width: 370px;
    text-align: left;

    background: #414042;
    border-right: 1px solid #FFF;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
	color: #fff;
    background: #499ab4;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
	color: #fff;
	background: #499ab4;
	outline: 0;
}
.navbar-toggle{
	border: none;
	margin-top: 0;
	margin-right: 0;
	width: 32px;
	height: 32px;
	text-align: center;
	color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
	background: none;
	outline: none;
}

.navbar-default .navbar-collapse{
	border: none;
	background: rgba(255,255,255,0.05);
	border-radius: 2px;
	box-shadow: none;
}

and the HTML:

<!doctype HTML>
<html>

<head>
    <!-- Website Title -->
    <title>Draw Factory</title>
    
    <!-- Meta Info -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Draw Factory custom and unique design">
    <meta name="keywords" content="HTML5, CSS3, JQuery, WordPress, Design">
    <meta name="author" content="Me">
    
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css"><!-- bootstrap -->
    <link rel="stylesheet" href="css/font-awesome.min.css"><!-- font awesome -->
    <link rel="stylesheet" href="css/style.css"><!-- custom style -->
</head>
    

<body>
    
    <div class="wpa-header">
        <div class="container">
            <div class="row">
            
                <div class="wpa-top-bar">
                    
                    <div class="wpa-home text-left">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <a href="#"><i class="fa fa-home"></i></a>
                        </div><!-- end: cols -->
                    </div><!-- end: wpa-home -->

                    <div class="wpa-phone text-right">
                        <div class="col-lg-6 col-md-6 col-sm-6"> 
                            <p><i class="fa fa-phone"></i> <span>+31(0)</span>10 - 447 00 30</p>
                        </div><!-- end: cols --> 
                    </div><!-- end: wpa-phone -->
  
                </div><!-- end: wpa-top-bar -->    
            </div><!-- end: row -->
            
            
            <div class="wpa-top-nav">
                <div class="row">
                    <div class="wpa-navigation">
                    <div class="col-lg-12">
                    <nav class="navbar navbar-default" role="navigation"> 
                      <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                      </div>

                      <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav">
                          <li class="active"><a href="#">Diensten</a></li>
                          <li><a href="#">Projecten</a></li>
                          <li><a href="#">Inloggen</a></li>
                        </ul>
                      </div>
                    </nav>
                        </div>  
                    </div><!-- end: wpa-navigation -->
                </div><!-- end: row -->
            </div><!-- end: wpa-top-nav -->
            
        </div><!-- end: container -->
    </div><!-- end: wpa-header -->

    <!-- Essential JQuery -->
	<script src="js/jquery-latest.min.js"></script>
	<script src="js/bootstrap.min.js"></script>    
</body>
    
   
</html>
2

Post a link to your page, or set up a working example at CodePen. Otherwise, we have too little to work with here.

3

Hi sir,

I am not a beginner at css but sometimes i notice some things that are not easy to solve or fix.

Please view the url demo:
http://balkaneros.nl/demo/

and 2 pictures:

This is what i need the menu to look to perfectly align at the bottom of the div:
balkaneros.nl/demo/this.png

now i have this:
/balkaneros.nl/demo/error.png

Thanks in advance!!! The rest is not a problem.

and how can i set the width for the LINKS In the menu?

4

Hm, the issue is with the padding on various classes. Welcome to the miseries of using a framework (I have no idea why anyone would!) I don’t have enough experience with BS to suggest what to do here, but I recommend reading the docs in order to understand better how the framework works, as you surely shouldn’t have to get stuck with issues like this if there’s any rhyme or reason to the system.

In normal (non-framework) circumstances, I’d just tell you to remove padding here or there, but you have to be careful not to break the framework, which is why I suggest learning more about it. Perhaps @PaulOB can help you out here.

5

One of the problems with bootstrap is that you must stick to their rules.

e.g.From the docs:
“Use rows to create horizontal groups of columns.Content should be placed within columns, and only columns may be immediate children of row**s”

That means the structure must be similar to this with all your content inside these columns:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

You can’t mix your own divs in between the columns themselves or the whole thing breaks. Your content goes inside the columns.

If you have a structure that doesn’t work in their columns then come out of the grid and use your own custom css for that element.

Your demo doesn’t look like your png image at the moment and seems to be on the bottom. If you want to spread those three links evenly horizontally then I would use display:table and table-cell and not float the items. This would be very easy outside the grid but in your code we would need to fight the grid to get it to work.

e.g.

.wpa-navigation {
    overflow:hidden;
    clear:both;
}
.wpa-navigation .navbar-nav {
    clear:both;
    display:table;
    width:100%;
    table-layout:fixed;
    float:none;
}
.wpa-navigation .col-lg-12, 
.wpa-navigation .navbar-collapse {
    padding-left:0;
    padding-right:0;
}
.wpa-navigation .navbar-nav:after,
.wpa-navigation .navbar-nav:before{display:none}
.wpa-navigation .navbar-nav > li {
    display:table-cell;
    vertical-align:top;
    float:none;
    width:auto;
}
@media screen and (max-width:768px){
.wpa-navigation .navbar-nav > li {display:block}    
}

Always remember to consult the docs and make sure when you are using the grid that the rows and columns add up properly.

Hope that helps:)

6

Thank you very much for the explenation and help! i have coded a lot of divs now but i am having one problem now in the slider of the bootstrap. When i resize the screen the responsive slider is moving my font all the way around. I want the bullets to align LEFT to the menu with the title. Can you please tell me how to do this? and also i have aligned the menu to the header bottom but i am not sure of i am doing it right.

Take a look at current demo:
http://www.balkaneros.nl/demo/

Thanks in advance!!!

P.S.
and since i am trying to upgrade my skills in HTML/CSS any advice on the CSS or HTML would be great for learning!

7

Do you mean the pagination buttons?

If so you can move them left by adding these extra rules.

.carousel-indicators {
width:100%;
    max-width:1170px;
    margin:0 auto;
    left:0;
    right:0;
    padding:0 10px;
}

You’ll have to explain in a little more detail what else you need as its hard to know exactly what you want to do there :slight_smile:

8

Hi Mr!

I want the carousel indicators the bullets & H1 header tekst to align to the LEFT.

THanks!!!

10

Let me explain what i want to get:

I am trying to position the carousel caption and slider bullets both to the left side to align with the menu. Now when i resize the header text is moving and the bullets too.

Thanks in advance.

11

To align the h1 to the left, change text-align: center to text-align: left on line 240 of your css file:

.wpa-slogan h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 120px;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
}

Aligning the bullets is tough, because your slider is full width. For wide screens, you could put something like this in your custom CSS file:

.carousel-indicators {
width: 1170px !important;
margin-left: -570px !important;
}

But you’ll have to add in different settings for each of your @media breakpoints too.

12

The code I gave above will align the bullets to match the left of the centred layout (in modern browsers):slight_smile:

13

Sorry Paul. Didn’t notice that. Nice solution. :slight_smile:

14

Thanks @PaulOB and @ralphm can you please take a look at my different post… do you guys have ANY solution or trick on how to create those icon to have that effect?

Thanks in advance guys!

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.