Welcome to WebmasterWorld Guest from 54.234.114.202

Forum Moderators: not2easy

Message Too Old, No Replies

get logo to center on tablets

     
8:44 pm on Feb 23, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4318
votes: 41


I have a site that is done in bootstrap. Right now it looks good on desktops and mobile devices. My logo and menu and on the same line on desktop and are left and right justified. On mobile it just turns into a small box with a drop down menu in top left and logo is centered.

In some cases like tables my logo and menu end up on 2 lines instead of one but continue to be left and right justified. In this case I would like them to be centered on the page. How can I do this? It seems that bootstrap is sending the logo to the left. I see this when I inspect the page

media (min-width: 768px)
.navbar-header {
float: left;
}


Here is the page code.

<nav class="navbar">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo BASE_URL; ?>//"><img src="<?php echo BASE_URL; ?>/img/logo.png" class="img-logo img-responsive"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="<?php echo BASE_URL; ?>//">home<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="<?php echo BASE_URL; ?>/courses.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses</a>
<ul class="dropdown-menu">

<li><a href="<?php echo BASE_URL; ?>/basic-adwords.php">Adwords Basic</a></li>
<li><a href="<?php echo BASE_URL; ?>/advanced-adwords.php">Adwords Advanced</a></li>
</ul>
</li>
<li><a href="<?php echo BASE_URL; ?>/about-us">about</a></li>
<li><a href="<?php echo BASE_URL; ?>/resources.php">resources</a></li>
<li><a href="<?php echo BASE_URL; ?>/solutions.php">solutions</a></li>
<li><a href="<?php echo BASE_URL; ?>/contact.php">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
8:40 am on May 3, 2016 (gmt 0)

Junior Member

10+ Year Member

joined:June 26, 2008
posts:178
votes: 0


Couple of things to try:

media (min-width: 768px)
.navbar-header {
float: left;
text-align: center;
}


Or

media (min-width: 768px)
.navbar-header {
margin: 0 auto 0 auto;
}


The latter will centre the div itself, whereas the former will centralise the content of the div.

Depends on what you're trying to acheive, but playing with both of those solutions should see you on the right path.
8:41 am on May 3, 2016 (gmt 0)

Junior Member

10+ Year Member

joined:June 26, 2008
posts:178
votes: 0


Also, if you have two divs falling side by side, it's because of the float: left; property. I'd suggest you read up on floats.