Login | Register | FAQ

A logo on left side of navbar-default navbar-fixed-top

+ Post a reply

1 post Page 1 of 1

A logo on left side of navbar-default navbar-fixed-top

by azolfaghari50 » Sat Apr 07, 2018 2:52 pm

Hi There,
I want to place a logo on the left side of a navbar-default navbar-fixed-top. But logo goes on the top and it does not get aligned with the navbar. I want the logo and navbar to be fixed on the top of the page, while scrolling down, they stay there at the top in one row. Please help me on this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Untitled Document</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

<!-- Main HTML body -->
<body style="padding-top: 70px">

<!-- to have a gap before logo -->
<table width="100%" height="0.5%" border="0"><tr class="header"><th><div style="line-height:80%;"> <br></div></th></tr></table>

<!-- table for MRT logo and nav bar -->
<table width="100%" height="4%" border="0">
<th width="4%" height="4%" scope="col" ></th>
<th width="6%" scope="col"><a href="//static-www.modelling.com"><img src="Images/mmm logo.jpg" width="100%" height="100%" align="left" ></a> </th>
<th width="90%" height="4%" scope="col">

<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<nav class="navbar-bottom" style="background-color: white">
<div class="container-fluid" >
<!-- header -->
<div class= "nav navbar-nav navbar-right" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" ><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar" ></span></button>
<!-- Collect the nav links, forms, and other content for toggling -->
<li ><a href="#" class="block-right"><img src="Images/mmm logo.jpg" width="6%" height="3%" /></a></li>
<li ><a href="#" >Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Solutions & Services<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Underwriting.html">one</a></li>
<li><a href="#">two</a></li>

<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<!-- /.navbar-collapse -->
<!-- /.container-fluid -->

<!-- to have a gap after logo -->
<table width="100%" height="0.5%" border="0"><tr><th><div style="line-height:40%;"> <br></div></th></tr></table>

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.freezeheader.js"></script>

User avatar


  • Posts: 1
  • Joined: Sat Apr 07, 2018 2:44 pm

+ Post a reply

Page 1 of 1