Customisation of the top navigation

• 

  instyleweddingcars · Member · Dec 18, 2009 at 6:01 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  Im trying to match the top nav on the blog to that of the wesite the blog is for. The look Im trying to acheive is the same as this site http://www.instyleweddingcars.co.uk/index.html but whatever Ive tried the menu just messes up as can be seen on the blog http://instyleweddingcars.wordpress.com/ when the mouse goes over. I was wondering if one of the experts on here could point me in the right direction. I mean can this actually be done

  this is the code Im trying currently
  div#menu {
  background-image:url(‘http://instyleweddingcars.files.wordpress.com/2009/12/top-nav-bg.jpg’);
  height:44px;
  width:920px;
  }

  div#menu li {
  float:left;
  height:37px;
  padding:7px 15px;
  }

  div#menu a {
  display:block;
  float:left;
  text-decoration:none;
  text-transform:uppercase;
  font-family:tahoma, Verdana, Geneva, sans-serif;
  font-size:11px;
  font-weight:bold;
  color:#FFFFFF;
  height:37px;
  padding:7px 15px;
  }

  div#menu ul {
  list-style:none;
  line-height:normal;
  height:37px;
  margin:0;
  padding:7px 15px;
  }

  div#menu a:hover {
  color:#000;
  background-image:url(‘http://instyleweddingcars.files.wordpress.com/2009/12/top-nav-bg-over.jpg’);
  background-repeat:repeat-x;
  height:37px;
  padding:7px 15px;
  }

  thanks in advance

  The blog I need help with is: (visible only to logged in users)

• 

  ban750 · Member · Dec 18, 2009 at 6:53 pm

  • Copy link

  Try this

  div#menu {
  background-image:url('http://instyleweddingcars.files.wordpress.com/2009/12/top-nav-bg.jpg');
  height:44px;
  width:920px;
  }
  
  div#menu ul {
  display:inline;
  list-style:none;
  line-height:normal;
  margin:0;
  padding:0;
  }
  
  div#menu ul li {
  float:left;
  height:44px;
  width:auto;
  overflow:hidden;
  margin:0;
  }
  
  div#menu ul li a {
  display:block;
  float:left;
  text-decoration:none;
  text-transform:uppercase;
  font-family:tahoma, Verdana, Geneva, sans-serif;
  font-size:11px;
  font-weight:bold;
  color:#FFFFFF;
  height:37px;
  padding:7px 15px;
  }
  
  div#menu ul li a:hover {
  color:#000;
  background-image:url('http://instyleweddingcars.files.wordpress.com/2009/12/top-nav-bg-over.jpg');
  background-repeat:repeat-x;
  height:37px;
  padding:7px 15px;
  }

• 

  devblog · Member · Dec 18, 2009 at 7:09 pm

  • Copy link

  just an observation, you don’t need to write your selectors like this

  div#menu {...}

  This should suffice:

  #menu {...}

• 

  instyleweddingcars · Member · Dec 18, 2009 at 8:51 pm

  • Copy link

  thanks ban750 worked perfectly

  @devblog I do usually write them how you suggested but some were written the way they were in wordpress so with being new to it I thought maybe it was how it needed to be – thanks for the heads up anyway