Title: Styling and PHP
Last modified: October 11, 2018

---

# Styling and PHP

 *  [ksmsupportorg](https://wordpress.org/support/users/ksmsupportorg/)
 * (@ksmsupportorg)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-and-php/)
 * Hi,
 * I’ve installed the plugin and until now it’s placed on top of page, in widget
   area. I’d prefer it to be between navbar and content div. In my theme (GeneratePress)
   the area is _primary_ I think. So how could then the breadcrumbs be just in that
   place.
 * And secondly, what should I do to apply some CSS styling to it? I’ve seen some
   nice breadcrumbs over there, like this:
 *     ```
       * {
         margin: 0;
         padding: 0;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-size: 12px;
       }
   
       body {
         text-align: center;
         background-color: #34495e;
       }
   
       h1 {
         font-weight: 100;
         font-size: 32px;
         padding: 40px;
         color: #fff;
       }
   
       #breadcrumb {
         list-style: none;
         display: inline-block;
       }
       #breadcrumb .icon {
         font-size: 14px;
       }
       #breadcrumb li {
         float: left;
       }
       #breadcrumb li a {
         color: #FFF;
         display: block;
         background: #3498db;
         text-decoration: none;
         position: relative;
         height: 40px;
         line-height: 40px;
         padding: 0 10px 0 5px;
         text-align: center;
         margin-right: 23px;
       }
       #breadcrumb li:nth-child(even) a {
         background-color: #2980b9;
       }
       #breadcrumb li:nth-child(even) a:before {
         border-color: #2980b9;
         border-left-color: transparent;
       }
       #breadcrumb li:nth-child(even) a:after {
         border-left-color: #2980b9;
       }
       #breadcrumb li:first-child a {
         padding-left: 15px;
         -moz-border-radius: 4px 0 0 4px;
         -webkit-border-radius: 4px;
         border-radius: 4px 0 0 4px;
       }
       #breadcrumb li:first-child a:before {
         border: none;
       }
       #breadcrumb li:last-child a {
         padding-right: 15px;
         -moz-border-radius: 0 4px 4px 0;
         -webkit-border-radius: 0;
         border-radius: 0 4px 4px 0;
       }
       #breadcrumb li:last-child a:after {
         border: none;
       }
       #breadcrumb li a:before, #breadcrumb li a:after {
         content: "";
         position: absolute;
         top: 0;
         border: 0 solid #3498db;
         border-width: 20px 10px;
         width: 0;
         height: 0;
       }
       #breadcrumb li a:before {
         left: -20px;
         border-left-color: transparent;
       }
       #breadcrumb li a:after {
         left: 100%;
         border-color: transparent;
         border-left-color: #3498db;
       }
       #breadcrumb li a:hover {
         background-color: #1abc9c;
       }
       #breadcrumb li a:hover:before {
         border-color: #1abc9c;
         border-left-color: transparent;
       }
       #breadcrumb li a:hover:after {
         border-left-color: #1abc9c;
       }
       #breadcrumb li a:active {
         background-color: #16a085;
       }
       #breadcrumb li a:active:before {
         border-color: #16a085;
         border-left-color: transparent;
       }
       #breadcrumb li a:active:after {
         border-left-color: #16a085;
       }
       ```
   
 * And it would be awesome to apply to my page. Any advise? Thank you very much!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstyling-and-php%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [John Havlik](https://wordpress.org/support/users/mtekk/)
 * (@mtekk)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-and-php/#post-10820829)
 * The linked page does not appear to be using Breadcrumb NavXT to generate it’s
   breadcrumb trail. It looks like your breadcrumb trail is in a `p` element with
   id `breadcrumbs` so you’d want to target that with your CSS.

Viewing 1 replies (of 1 total)

The topic ‘Styling and PHP’ is closed to new replies.

 * ![](https://ps.w.org/breadcrumb-navxt/assets/icon.svg?rev=1927103)
 * [Breadcrumb NavXT](https://wordpress.org/plugins/breadcrumb-navxt/)
 * [Support Threads](https://wordpress.org/support/plugin/breadcrumb-navxt/)
 * [Active Topics](https://wordpress.org/support/plugin/breadcrumb-navxt/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/breadcrumb-navxt/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/breadcrumb-navxt/reviews/)

## Tags

 * [placing](https://wordpress.org/support/topic-tag/placing/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 1 reply
 * 2 participants
 * Last reply from: [John Havlik](https://wordpress.org/support/users/mtekk/)
 * Last activity: [7 years, 7 months ago](https://wordpress.org/support/topic/styling-and-php/#post-10820829)
 * Status: not resolved