Docs

[gobeyondesign]

http://www.tsi4usa.com

I am trying to create a transparent background for the stacked logo bar and navigation bar – but it looks like there is a line in between them. AND when I am in mobile view I would like the navigation box to be inline and not stacked but this I don’t know how to do.

Here is my css code for the transparent background – I told it no border….

.site, .x-logobar, .x-navbar{
background-color: 000000;
opacity: .75;
border: none; !important
}
.site > .x-container.max {
background-color: #000000;
boder: none; !important
}

[gobeyondesign]

And the nav bar is not the same color as the logo bar – but my css is telling it to be 000000…. I need help fixing this too please.

And my footer background is transparent but its not supposed to be – my css must be screwed up here.

🙂

[Rupok]

Hi there,

Thanks for writing in! It’s a bit confusing as you stated lot of issues altogether. I’ll try to solve them point by point.

#1. Your Navbar has black background (set by you) and I can’t see any line. Kindly specify with a screenshot.

#2. To make this inline for mobile, you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
.x-logobar {
  left: 0;
  position: absolute;
  top: 50px;
  max-width: 75%;
  z-index: 1031;
}

.masthead-stacked .x-btn-navbar {
  float: right;
  margin-bottom: 10px;
  margin-top: 10px;
}
}

#3. You have set background image for the footer :

footer.x-colophon.bottom {
  background: rgba(0, 0, 0, 0) url("http://tsi4usa.com/wp-content/uploads/2016/08/footer-background.jpg") repeat-x scroll 0 0;
  border: medium none;
}

Hope this helps.

[gobeyondesign]

the footer still is muted its not a dark gradient like I designed it.

Also how do I make the top bar only 17px tall? I want it to be a thick line above the logo bar?

Thank you.

[gobeyondesign]

How do I make the nav bar transparent? I have it selected in the customizer but its not transparent and I want it to look exactly the same as the logo bar.

[Joao]

Hi There,

To make your navbar the same like your logo bar please add the following code to Appereance Customizer Custom CSS

.x-navbar {
    background-color: #121212;
    opacity: .75;
}

I am not sure what you are trying to achieve wih your footer but you can try adding the following code to Appereance Customizer Custom CSS

footer.x-colophon.bottom {
     background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 *
}

Hope it helps

Joao

[gobeyondesign]

how do I make the top bar only 17px tall? I want it to be a thick line above the logo bar?

[gobeyondesign]

So in tablet view the logo on the inline bar like falls below the transparent background.

[gobeyondesign]

view of tablet view

[gobeyondesign]

My image buttons at the bottom of the page are not centering even though I have CSS telling it to !

Also on the mobile version I have this UGLY view.

[Christopher]

Hi there,

Please enable topbar and add this code in customizer:

.x-topbar{

height:17px;
}

.image-swap-sitemap, .image-swap-contact, .image-swap-employee, .image-swap-about {
    margin: 0 auto;
}

Please find and remove this code :

@media only screen and (max-width: 979px){
.x-logobar {
    left: 0;
    position: absolute;
    top: 50px;
    max-width: 75%;
    z-index: 1031;
}
}

Hope it helps.

[gobeyondesign]

the top bar is still too wide at the top.

[gobeyondesign]

I need the back background behind the logo on the mobile view to be removed.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media (max-width: 979px) {
.x-navbar {
background: none;
}
}

[gobeyondesign]

The blue bar is still too wide at the top. I need it to be 17px exactly.

[Author]

Posts