WordPress.org

1. alasdaircat
   Member
   Posted 2 years ago #

   Dear Community,
   I'm completely new to this wordpress thing.
   I'm using Arjuna theme on http://iki-island.net/
   I'm trying to double the height of the header menu so that Places To Stay etc is showing with the same dark background as the other items (Home etc). I found the dark background in the Images folder and it's called HeaderMenu1. I've tried changing all the heights in the below section of code, but I just screw various things up.
   How do I do this? What I think is the relevant code is:

   /* Content Wrapper */
   .contentWrapper {
   min-height:350px;
   padding:20px;
   }

   .headerMenu1 {
   z-index:2;
   position:relative;
   min-height:25px;
   background:url(./images/headerMenu1.png) no-repeat 0 bottom;
   }
   .headerMenu1 ul {
   float:right;
   margin:0 20px;
   }
   .headerMenu1L ul {
   float:left;
   }
   .headerMenu1 ul li {
   float:left;
   height:24px;
   position:relative;
   z-index:1;
   }
   .headerMenu1 li a,
   .headerMenu1 li a:visited {
   display:block;
   height:24px;
   line-height:24px;
   color:#a6a6a6;
   font-size:11px;
   text-decoration:none;
   padding:0 8px;
   }
   .headerMenu1 li a:hover {
   color:#bfbfbf;
   text-decoration:none;
   }
   .headerMenu1 ul ul {
   position:absolute;
   top:24px;
   right:0;
   display:none;
   background-color:#dbdddd;
   border:1px solid #000;
   margin:0;
   z-index:1;
   }
   .headerMenu1L ul ul {
   right:auto;
   left:0;
   }
   .headerMenu1 li li {
   float:none;
   width:180px;
   height:auto;
   }
   .headerMenu1 li li a,
   .headerMenu1 li li a:visited {
   height:auto;
   line-height:20px;
   padding:0 8px;
   width:164px;
   position:relative;
   color:#333;
   }
   .headerMenu1 li li a:hover {
   background:#cacccc;
   padding:0 8px;
   color:#333;
   }
   .headerMenu1 li:hover ul,
   .headerMenu1 li.jHover ul {
   display:block;
   }
   .headerMenu1 ul ul ul,
   .headerMenu1 li:hover ul ul,
   .headerMenu1 li.jHover ul ul {
   display:none;
   top:3px;
   right:175px;
   }
   .headerMenu1L ul ul ul,
   .headerMenu1L li:hover ul ul,
   .headerMenu1L li.jHover ul ul {
   right:auto;
   left:175px;
   }
   .headerMenu1 li li:hover ul,
   .headerMenu1 li li.jHover ul {
   display:block;
   }

2. wetwetwafu
   Member
   Posted 2 years ago #

   try to edit the image here:

   image

   look at the half black rounded-rectangle at the upper part,

   i think you just have to strecth that part a litle bit down..

   but make sure you have a backup first of the original image.

3. wetwetwafu
   Member
   Posted 2 years ago #

   approximately, it should have a height of 52px. try this before meesing up with codes..

4. alasdaircat
   Member
   Posted 2 years ago #

   Thanks for the feedback. I've doubled the height of the image in Paint using resize, and it partly does what I want to do, but the formatting is not quite right, e.g. the Home image is half covered and the bottom left is not quite right. Really I would want to double the black header while not doubling the Home image, but because it's in the same file I can't seem to do that. Can you provide any further advice.
   http://iki-island.net/

5. wetwetwafu
   Member
   Posted 2 years ago #

   there's something wrong with your editing. you fordot to remove the white background before saving.

   i edit the image for you, download it here

   http://remotesupportsolutions.com/testedward/headerMenu2.rar

   download thet, then extract, then replace the existing header image of your site with the one that i edited.

6. alasdaircat
   Member
   Posted 2 years ago #

   It worked perfectly! wetwetwafu, I really appreciate you taking the time to put that together for me.
   Can anyone advise how I should have edited the image to avoid this issue? I just opened Paint, highlighted the header area and dragged it down. Obviously there is a better way - should I have used a wordpress image editor?

Topic Closed

This topic has been closed to new replies.