Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

WordPress Menu CSS Border Problem

Posted on 2013-06-05
9
458 Views
Last Modified: 2013-06-05
Is there a better way to do a border on a top navigation in my WordPress site?

http://www.beartoothflyfishing.com/ 

Here is the CSS that drives the borders now. I am getting a double border for the drop-downs, and I have done a few specific CSS fixes for specific menu-header items, but would prefer a solution where I would not have to apply band-aid fixes every time the menu changes.

Border CSS for menu:

#access .menu-header li, div.menu li { 

border-top: 3px solid #f3c656;
border-bottom: 3px solid #f3c656;
border-right: 3px solid #f3c656;

}

Open in new window


Example of "band-aid fix":

#access #menu-item-135 {
	border-right: 0;
}

Open in new window

0
Comment
Question by:mopar003
  • 5
  • 4
9 Comments
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39223450
You could use,

#access .menu-header li, div.menu li {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

border: 3px #f3c656;


}

and in style.css line 641,

#access ul ul {
      -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
      display: none;
      position: absolute;
      /*      top: 200px;*/

      padding-top: 3px;

/*      top: 180px;*/
      /*left: 0;*/

      float: left;
      z-index: 99999;
     border-top: 0px;
      border-bottom: 0px;

}



And get rid of,

#access #menu-item-135 {
      border-right: 0;
}
0
 
LVL 1

Author Comment

by:mopar003
ID: 39223826
Thank you for the reply.  I changed the CSS and the old borders went away, but the code you suggested did not take.  I left it up since it is still functional, but without borders.  Any suggestions?
0
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39223953
Try this,

Get rid of the RED and move the lower GREEN to where the GREEN arrow points
CSS
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:mopar003
ID: 39223986
Awesome instruction, thank you so much for taking the time to look at this.  

I have made the updates as indicated.  Still not seeing borders though. Checked on Chrome, IE 10, and Firefox.
0
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39224315
Give this a try,
CSS Adjustments
0
 
LVL 1

Author Comment

by:mopar003
ID: 39224343
Awesome, this is looking good.  I think I have one more question.  It looks like the inner borders are doubled up (2x thickness). The outer edges are just right. Do you know how to get rid of this?  

BTW, your help is very clear!  Mucho kudos.
0
 
LVL 23

Accepted Solution

by:
tailoreddigital earned 500 total points
ID: 39224379
Give this a try, add the green elements,
CSS
0
 
LVL 1

Author Closing Comment

by:mopar003
ID: 39224399
Awesome, you helped me get this thorn out of my side and learned a few things along the way too.  Thanks a lot!
0
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39224403
No problem, glad i can help.

It looks good in Firefox 21, Internet Explorer 9 and Chrome 27
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 55
PHP Query return divisible by 3 3 26
CSS SASS 4 34
100% tall div not scrollable on iPhone 3 20
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question