I'm creating a website. and I'm starting with the header first. I have this code for my header page:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<a href="index.php">
<img border="0" class="logo" src="images/logo.png" width="15%" height="20%" align="left" /></a> <font size="15%"><div align="center" class="BDtext"> Title Here<br> Description Here</font></div><br>
<nav class="clearfix">
<ul class="clearfix">
<li class="home"><a href="index.php">Home</a></li>
<li class="about"><a href="about.php">About</a></li>
<li class="me"><a href="ben.php">About Me</a></li>
<li class="sessions"><a href="sessions.php">Sessions</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</body>
</html>
Which I am aware that the align="left" is used to allow everything else to be positioned to the right of image.
however.
I only want the title and description to be to the right of the image.
in some web browsers, the menu bar goes over the image.
an example of this is when I use this code in my style.css:
@media only screen and (max-width : 320px) {
.BDtext {
display: none;
}
I want this to be aligned underneath the image.
Please can someone explain how I can keep the image aligned left but stop the menu bar from overlapping the image instead of using the br code?
please help.
thank you.