The CSS code for the navbar appears at the top of the page. How can I hide it? I use internal CSS.
Here's how it looks in the browser:
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layout/css/bootstrap.min.css" rel="stylesheet">
<link href="layout/css/fontawesome.min.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
display: inline;
font-family: sans-serif;
overflow: hidden;
user-select: none;
}
nav .logo{
color: white;
font-size: 33px;
font-weight: bold;
line-height: 50px;
padding-left: 50px;
}
nav{
height: 70px;
background: #063247;
box-shadow: 0 3px 15px rgba(0,0,0,.4);
}
nav ul{
float: right;
margin-right: 10px;
}
nav ul li{
display: inline-block;
}
nav ul li a{
color: white;
display: block;
padding: 0 15px;
line-height: 70px;
font-size: 20px;
background: #063247;
transition: .5s;
}
nav ul li a:hover,
nav ul li a.active{
color: #23dbdb;
}
nav ul ul{
position: absolute;
top: 85px;
border-top: 3px solid #23dbdb;
opacity: 0;
visibility: hidden;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
transition: .3s linear;
}
nav ul ul li{
width: 150px;
display: list-item;
position: relative;
border: 1px solid #042331;
border-top: none;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul{
border-top: none;
}
nav ul ul ul li{
position: relative;
top: -70px;
left: 150px;
}
nav ul ul li a i{
margin-left: 45px;
}
section{
background: url(bg.jpeg);
background-position: center;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<nav>
<label class="logo">Clothes Store</label>
<ul>
<li><a class="active" href="home.php">الصفحة الرئيسية</a></li>
<li>
<a href="viewProducts.php">الفئات
<i class="fas fa-caret-down"></i>
</a>
</li>
<li>إضافة منتجات
</li>
<li>السلة</li>
<li>التواصل</li>
<li>Feedback</li>
<li>تسجيل الخروج</li>
</ul>
</nav>
</body>
</html>
On all pages, this code appears at the top of the page.
What is the wrong in the code?
At first it doesn't appear, but then suddenly comes:
.....................................................
I am trying to get the header of my site and the navigation on the same line. I want the header to be aligned left and the navigation to be centered. My code doesn't seem to be working, so I was wondering if anyone has any solutions? Thanks in advance.
an example of what I am trying to have it look like...
my header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!-- site-header -->
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
wp_nav_menu(array(
'menu' => 'Primary Menu Links',
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Walker()
));
?>
</nav>
</header>
</div>
my css
.site-header h1 {
margin: 0;
font-family: 'futura_tbold';
font-size: 24px;
text-align: left;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 20px;
position: fixed;
z-index: 10000;
}
/* Drop Down Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
}
#cssmenu {
height: 37px;
text-align: center;
margin-bottom:50px;
width: 0 auto;
margin-right:38px;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover
}
#cssmenu > ul {
}
#cssmenu > ul > li {
list-style: inside none;
position: relative;
display: inline-block;
}
#cssmenu > ul > li > a {
display: block;
position: relative;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
color: #2f3847;
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
}
#cssmenu > ul > li > a:hover {
color:#8F1E3E;
}
#cssmenu > ul > li:first-child > a {
}
#cssmenu > ul > li > a:after {
content: '';
position: absolute;
}
#cssmenu ul li.has-sub:hover > a:after {
position: absolute;
top: 28px;
left: 11px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #3d0d1d;
border-left: 7px solid transparent;
border-bottom-color: rgba(61, 13, 29, 1);
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #3d0d1d transparent;
}
#cssmenu > ul > li.has-sub > a:before {
}
#cssmenu > ul > li.has-sub:hover > a:before {
}
#cssmenu ul li.has-sub:hover > a {
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
color: #8F1E3E;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
padding: 10px 0;
background: #490f20;
border-radius: 0px 0px 0px 0px;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
line-height:25px;
}
#cssmenu ul ul a:hover {
color: #ffffff;
background-color:#8F1E3E;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}
Here you go buddy hope this helps
Jsfiddle
<div class="navigation">
<div class="container">
<div class="logo">
<!-- <img src="#" alt=""> -->
<span>LOGO</span>
</div>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
</div>
</div>
.navigation {
float: left;
width: 100%;
padding: 10px 0;
border-bottom: 2px solid black;
}
.container {
max-width: 90%;
margin: 0 auto;
position: relative;
}
.logo {
position: absolute;
top: 0;
left: 0;
}
nav ul {
margin: 0 auto;
text-align: center;
}
nav ul li {
display: inline-block;
}
I have Googled this problem and while there are some hints at fixes, most are theme specific. I did find a link to create a print.css and it works somewhat but the menu navigation still prints over the content in the web page. I only want the content of the page to print...no header, footer, sidebar, or navigation menu. The style page I created via direction of the link is below. I also added the link to the header.php as directed. It seems the print.css works for everything but the navigation menu. There is a custom style sheet named nations-styles.css referred to in the header.php and located at /wp-content/themes/smartbusiness/css. I'm thinking there might be additional navigation problems that need to be address with that style sheet. I am new to CSS, so I'm not sure how to make this work so they navigation doesn't show up in the printing of the page. I've tried #header, .nav-box {display:none} and that doesn't seem to work either.
All help resolving this issue would be greatly appreciated.
print.css below
#media print {
body {background:white;
font-size:10pt;
margin:0 }
#sidebar { display:none }
#header { display:none}
#header, .nav-box {display:none}
#nav {display:none}
#content{ margin-left:0;
float:none;
width:auto }
.demo .red { color:black;
font-weight:bold }
#content a { font-weight:bold;
color:#000066;
text-decoration:underline }
#content{ margin-left:0;
float:none;
width:auto }
#footer, .ad { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
h3 { margin-left:10px;
margin-bottom:0px;
padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
img.centered { display: block;
margin-left: auto;
margin-right: auto; }
img.right { padding: 4px;
margin: 0 0 2px 7px;
display: inline; }
img.left { padding: 4px;
margin: 0 7px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid;
page-break-after:avoid; }
}
header.php below
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>">
<title><?php
/* Print the <title> tag based on what is being viewed. */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'smartbusiness' ), max( $paged, $page ) );
?></title>
<?php
global $shortname;
$favicon = get_option($shortname.'_favicon');
if ($favicon) {
?>
<!-- ~~~~~~ FAVICON ~~~~~~ -->
<link rel="shortcut icon" href="<?php echo $favicon; ?>" />
<?php } ?>
<meta name="viewport" content="width=device-width, <?php if (get_option($shortname."_zoom_feature") == 'No') { echo 'initial-scale=1.0'; } else { echo 'user-scalable=yes'; } ?>">
<?php wp_head(); ?>
<?php
$theme_color_skin = strtolower(get_option($shortname."_theme_color_skin"));
?>
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/<?php echo $theme_color_skin; ?>/css/ie.css" /><![endif]-->
<!--Added to work with minify - removed from functions.php
<link id="stylesheet_custom_style-css" media="screen" type="text/css" href="/wp-content/themes/smartbusiness/functions/custom-css-main.php" rel="stylesheet"> -->
<link id="stylesheet_custom_style-css" media="screen" type="text/css" href="/wp-content/themes/smartbusiness/css/nations-styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
</head>
<body <?php body_class('custom-background'); ?>>
<!-- wrapper -->
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<!-- section -->
<div class="section">
<h1 class="logo"><img src="<?php $custom_logo = get_option($shortname.'_logo'); echo $custom_logo; ?>" alt="<?php echo bloginfo('name'); ?>" /></h1>
<div class="contact-box">
<?php if (get_option($shortname."_phone_number")) { ?><strong class="phone"><?php echo get_option($shortname."_phone_number"); ?></strong><?php } ?>
<?php if (get_option($shortname."_social_links") == 'true') { ?>
<!-- social -->
<ul class="social">
<?php if (get_option($shortname."_social_links_twitter")) { ?><li><?php echo get_option($shortname."_social_links_twitter_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_facebook")) { ?><li><?php echo get_option($shortname."_social_links_facebook_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_pinterest")) { ?><li><?php echo get_option($shortname."_social_links_pinterest_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_dribbble")) { ?><li><?php echo get_option($shortname."_social_links_dribbble_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_vimeo")) { ?><li><?php echo get_option($shortname."_social_links_vimeo_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_googleplus")) { ?><li><?php echo get_option($shortname."_social_links_googleplus_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_rss")) { ?><li><?php echo get_option($shortname."_social_links_rss_caption"); ?></li><?php } ?>
</ul>
<?php } ?>
</div>
</div>
<!-- nav-box -->
<nav class="nav-box">
<!-- nav -->
<?php
wp_nav_menu(array(
'menu' => 'Header Menu',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'fallback_default_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => '',
'theme_location' => 'header_menu'
));
//the main menu for iPhone version
dropdown_menu( array('dropdown_title' => 'Header Menu', 'indent_string' => ' - ', 'indent_after' => '','container' => '', 'container_class' => '', 'menu_id' => 'mobile-meny', 'theme_location'=>'header_menu') );
?>
</nav>
</header>
nations-styles.css
#charset "utf-8";
/* Nations Styles */
#main .container h1 { margin-bottom:10px;}
#main .container h2 { margin-bottom:10px;}
#main .container h3 { margin-bottom:10px;}
#main .container h4 { margin-bottom:5px;}
#main .container h5 { margin-bottom:5px;}
#main .container h6 { margin-bottom:5px;}
#main .container p { margin-bottom:15px;}
.space { display: block; width:100%; height:15px;}
strong, b { font-weight: bold;}
ul.ulFloatL { overflow: auto;}
ul.ulFloatL li { float: left; width:49.5%; margin-bottom:15px; font-weight:bold; font-size:18px;}
ul.ulFloatL li img { max-width:100%; margin:0;}
.overflowH { overflow:hidden;}
.floatL { float:left;}
.iconLogo { margin: 3px 20px 3px 0;}
.grid-cols .col33 { overflow: auto;}
.imgScale { max-width:100%; width:auto;}
#sidebar .widget ~ .widget { margin-top:20px;}
h2 .divider { margin:0 0 10px; padding:0;}
h2 .divider ~ .divider { padding:13px 0 0; margin-bottom: 25px;}
.btn.red, .tp-caption.slide_button a, .comment-form .submit, .tp-caption.slide_button a.btn { background:#C7362D; border: 1px solid #b7261D !important; color:#FFE6E7; border-radius:5px !important; padding:8px 15px 7px; text-transform: uppercase; font:300 14px/16px 'Oswald',Arial,Helvetica,sans-serif;}
.btn.red:hover, .tp-caption.slide_button a:hover, .comment-form .submit:hover, .tp-caption.slide_button a.btn:hover { background:#b7261D; color:#fff;}
.tp-caption.slide_title { color:#C7362D;}
.comment-form .submit input { opacity:0;}
.fullwidthbanner-container .linklist a { font-size:24px; color:#C7362D; display: block;}
.fullwidthbanner-container .linklist a:hover, .fullwidthbanner-container .linklist a:active, .fullwidthbanner-container .linklist a:focus { color:#333;}
.nav-box #nav .sub-menu { top: 25px;}
.nav-box > ul > li > .has-drop-down-a { background-position: 100% 12px;}
.tp-leftarrow.default, .tp-rightarrow.default { top:50% !important;}
.nocomments { display:none;}
#header { background: #fff url(/wp-content/uploads/2013/10/bodyBg-grey.jpg) top center no-repeat;}
#header .section { padding:10px; border: none;}
.nav-box { padding-top:10px;}
.nav-box > ul > li { padding-bottom:11px;}
.social .twitter {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/twitter-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .facebook {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/facebook-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .rss {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/rss-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .facebook:hover, .social .twitter:hover, .social .rss:hover { opacity:1;}
.fullwidthbanner-container { background-color:#eee;}
#sidebar .current-menu-item a { color:#999;}
div.rss-output { padding:0 0 15px;}
footer .blog-links p, footer .news-contents p { line-height:16px;}
footer .news-contents div ~ div p { margin-top:10px;}
footer .news-contents .news { margin-left:0 !important;}
/* Footer Fix */
#footer, .footer-holder, .footer-frame, footer, footer .add-block { display: block !important; width:100%;}
footer .case { margin:0 auto;}
/* Home Slider */
.fullwidthbanner-container { margin-left:-2000px; float:left;}
.fullwidthbanner-container.loaded {margin-left:0; float:none;}
.fullwidthbanner-container.loaded .fullwidthbanner { max-height:300px;}
/* Theme Styles */
/* logo */
.logo { float:left; background: none; width:136px; height:80px; overflow: visible; text-indent: 0;}
html {background:#fff;}
.nav-box > ul, .nav-box > ul ul { font:18px/19px "Oswald", Arial, Helvetica, sans-serif !important; }
.nav-box > ul ul a { font-size: 14px !important; }
.nav-box > ul a { color: #FFE6E7 !important; }
.nav-box > ul a:hover { color: #ffffff !important; }
.nav-box > ul ul a { color: #333333 !important; }
.nav-box > ul ul a:hover { color: #ffffff !important; }
.nav-box {background:#C7362D; border-bottom: 1px solid #dddddd;}
h1, h2, h3, h4, h5, h6 {font-family:Oswald, Arial, Helvetica, sans-serif !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family:Oswald, Arial, Helvetica, sans-serif !important;}
h1, h2, h3, h4, h5, h6 {color:#111111 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#111111 !important;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {color:#b8b8b8 !important;}
#footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a {color:#b8b8b8 !important;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {color:#ffffff !important;}
#footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a {color:#ffffff !important;}
body {font-family:Arial, Arial, Helvetica, sans-serif;}
body {font-size:12px;}
body {color:#222222;}
a {color:#C7362D;}
a:hover{color:#001F5B;}
There is a div near the bottom of your page that starts like this:
<div class="select-options options-hidden drop-menu drop-dropdown-menu " style="position: absolute; top: 0px; left: 0px; width: 0px;"></div>
Most likely this is coming in from a menu plugin or your theme.
So in your print stylesheet, add:
.drop-holder{display: none !important; visibility:hidden !important;}
The "!important" will help force the style to take effect.
In the future, a great way to test print styles is using Google Chrome's Developer's Tools.
When viewing page in Chrome, press F12. In the Emulation tab at the bottom, Click Media, check the box next to CSS media, and make sure the dropdown is set to print. Then you can view your page using your print stylesheet.
Anyone can tell me what's wrong with these code...
I can't make sub menu to be shown...
I think my mistake at the part where I call sub menu from database. But I checked, there is nothing wrong..
maybe there are some mistake at css. but I don't know...
php code:
<html>
<head>
<link rel="stylesheet" href="<?php echo"css/copy.css" ?>" type="text/css" />
</head>
<?php include "koneksi.php"?>
<body>
<div id="page-wrap">
<ul class="dropdown">
<?php
/*where I select main menu from table mainmemnu*/
$main = mysql_query("SELECT * FROM mainmenu WHERE aktif='Y'");
while($r=mysql_fetch_array($main))
{
echo"<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";
/*where I select sub menu from table submenu*/
$sub = mysql_query
("SELECT * FROM submenu, mainmenu WHERE submenu.id_main = mainmenu.id_main AND submenu.id_main=$r[id_main]");
$jml = mysql_num_rows($sub);
if($jml > 0)
{
echo"<div><ul>";
while($w = mysql_fetch_array($sub))
{
echo
"<li>
<a href='$w[link_sub]'>
<span>
» $w[nama_sub]
</span>
</a>
</li>";
}
echo"</ul></div></li>";
}
else
{
echo"</li>";
}
}
?>
</ul>
</div>
</body>
</html>
css code:
* {margin: 0; padding: 0;}
body {font: 14px Helvetica, San-Serif;}
#page-wrap{width: 800px; margin: 0px auto; padding-left: 419px;}
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/* Level One */
ul.dropdown{position: relative;}
ul.dropdown li{font-weight: bold; float: left; zoom: 1; background: #ccc;}
ul.dropdown a:hover{color: #000;text-decoration: none;}
ul.dropdown a:active{color: #222;}
ul.dropdown li a{display: block; padding: 4px 8px; border-right: 1px solid #333; color:#222;}
ul.dropdown li:last-child a{border-right: none;}
ul.dropdown li.hover, ul.dropdown li:hover{background: #ffa500; color: black; position: relative; z-index: 9;}
ul.dropdown li.hover a{color: black;}
/* Level Two */
ul.dropdown ul{width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li{font-weight: normal; background: #DCDCDC; color: #000; z-index: 9; border-bottom: 1px solid #ccc; float: none;}
ul.dropdown ul li a{border-right:none; width:100%; display: inline-block;}
the sub menu won't come out when i bring cursor on the menu...
I would like to see what the HTML generated by the code looks like, but IMO, you are using way too many divs, spans, tags that are not needed..
Check out if this jsfiddle can help you out, its made purely out of HTML & CSS.
This is the part of the CSS you might be missing.
ul.dropdown > li > ul {
display: none;
}
ul.dropdown > li:hover > ul {
display: block;
}
http://jsfiddle.net/x9D37/
You need a javascript to manipulate the block you want to see when hovering over a tag.
You cannot hover over a hidden tag.
You are missing the css that will make the child div display.
Basically it comes down to:
/*hiding initially*/
.dropdown li ul
{
position: absolute;
display: none;
}
/*display selectively*/
.dropdown li:hover > ul
{
display: block;
}
I have this code for my header.php
<!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>
<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>
<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
and this one in my style.css:
body {
background-color: #ece8e5;
}
.logo{
float: left;
}
.BDtext {
text-align: center;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Menu */
#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;} /* Current Page Background Colour */
nav {
height: 40px;
width: 100%;
background: #455868; /* Menu Background Colour */
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4; /* Hover Over A Page Background Colour */
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 600px) {
.desktop {display:none;}
.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}
#media only screen and (min-width : 601px) {
.mobile {display:none;}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Menu */
my problem is.
my .mobilogo code in my CSS will not center the image.
I need this image to appear in the center of the page and not be aligned to the left.
please can someone help tell me what is holding it back?
.mobile class could have text-align:center; if you don't want to use the text-align try the below:
Also you can give .mobilogo width and have margin:0 auto; to center it.
.mobilogo{
margin:0 auto;
width:50%;
height: 50%;
}
In order for the width and height to work with percentages you need to give the parent elements width and height.
Make your .mobilogo class block and give it margin: 0 auto like this. Even though it has a width of 50% you'll have to make it a block element to center it with margin: 0 auto, or else you'll have to specify the width in pixels.
Like this:
.mobilogo {
margin: 0 auto;
display: block;
}