Navigation bar help

Support
#1

How Do I get a line below my navigation bar?

Codes I have so far

.x-brand img {
width: auto !important;
}

.x-navbar,
.entry-wrap,
.simple-social-icons ul,
.x-colophon.bottom{
border:none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
.x-colophon.top, .x-colophon.bottom {
border-top: 1px solid rgba(0,0,0,0.085) !important;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.8) !important;
}
.blog .x-header-landmark {
display: none;
}

.blog .x-main article:first-child .entry-wrap {
padding-top: 0;
}
.x-container.offset {
margin-top: 6em;
}
.blog .entry-title {
font-size: 185%;
}
.single-post h1.entry-title{
font-size: 185%; /* Adjust this accordingly*/
}

#respond h3,
.more-link {
font-size: 16px !important;
}
.entry-meta {
margin: 20px 0 !important;
}

.p-meta,
.logged-in-as,
.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-rating label, .comment-form-comment label {
font-size: 16px;
}

.blog .entry-footer {
display: none;
}

.single-post .entry-footer {
display:none;
}

@media (min-width: 768px) {
.blog .has-post-thumbnail {
overflow: hidden;
background-color: #fff;
padding: 60px;
}
.blog .has-post-thumbnail .entry-featured {
float: left;
width: 40%;
box-shadow: none;
border: none;
}

.blog .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 0 0 0 40px;
}
}

.single-post .entry-featured {
display: none;
}

.archive.category .entry-footer {
display: none;
}
.blog .entry-title,
.archive .entry-title {
font-size: 185%;
}
@media screen and (min-width: 768px) {
.blog .has-post-thumbnail .entry-featured,
.archive .has-post-thumbnail .entry-featured {
float: left;
width: 40%;
box-shadow: none;
border: none;
}
.blog .has-post-thumbnail .entry-wrap,
.archive .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 0 0 0 40px;
}
}

.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
background-color: #FFFF99;
border-radius: 5px;
}
.img-max-width {
max-width: 50%;
}

.x-comments-area {
margin-top: 0;
}
.single-post .entry-wrap {
padding-bottom: 0;
}
.x-comments-area {
margin-top: 0;
}
#optinforms-form3-container,
#optinforms-form3-container form {
margin-bottom: 0;
}

.hentry {
margin-top: 0em !important;
margin-bottom: 60px;
padding-top: 0px !important;
padding-bottom: 10px !important;
}
.entry-wrap {
padding-top: 0px !important;
}

body.single-post h2 {
font-size: 170% !important;
}

h2, .h2 {
line-height: 1.4;
}

.hentry {
overflow:hidden;
clear: both !important;
}

#2

Hello Shamalee,

Thanks for writing in!

To add a line below your navigation bar, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
    padding-bottom: 20px;
    border-bottom: 2px solid yellow;
}

I used yellow as the color of the line in the code above. Feel free to change it.

#3

I mean the exact line I have at the bottom of the blog, it came with Xtheme but I think I got a code to remove it a few months ago. Please look at the codes I have above www.blogbymichelle.com

#4

Hello Shamalee,

To remove the line in the footer, please make use of this code:

.x-colophon.top, .x-colophon.bottom {
    border: none !important;
    box-shadow: none;
}

In your code, you have this which added the line:

.x-colophon.top, .x-colophon.bottom {
  border-top: 1px solid rgba(0,0,0,0.085) !important;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.8) !important;
}

Hope this helps.

#5

No no you are not understanding. I want the exact line that I have in the footer in the header.

I do not want a yellow line, I want exact line that in the footer in the header/navigation

.x-navbar,
.entry-wrap,
.simple-social-icons ul,
.x-colophon.bottom{
border:none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;

#6

Hello Shamalee,

Sorry for the confusion. I wasn’t able to understand your inquiry.

How Do I get a line below my navigation bar?

Anyways, thanks for clarifying. To have the same line in your navbar, please make use of this code:

.x-navbar {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.085) !important;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.8) !important;
}

Please let us know how it goes.

1 Like
#7

It worked, thanks

#8

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.