logo without margins
Hi there,
Our logo contains a horizontal bar that goes on accross the whole screen. Now i'd like to the logo flush to the sides of the screen. How can i remove the margin?
i've tried
#Top_bar {
margin: -50px;}
but thats totally not a responsive ooption, unfortunately.
Thanks!
Our logo contains a horizontal bar that goes on accross the whole screen. Now i'd like to the logo flush to the sides of the screen. How can i remove the margin?
i've tried
#Top_bar {
margin: -50px;}
but thats totally not a responsive ooption, unfortunately.
Thanks!
Comments
please send us link to page where you want to remove margin/padding for logo.
I've set up a live sample @ http://silberseeex.lassooydesign.nl/ . Here you can see the logo + long horizontal line.
Now is there a more efficient way of making this logo + line responsive?
Thanks, Ed'
Below you find a snippet of the custom css, but it's a lot of code:
.header-overlay .overlay-menu-toggle {margin-top: -30px;}
}
#Action_bar {
top: 35px;
left: 225px !important;
background-image: url("http://silberseeex.lassooydesign.nl/wp-content/uploads/2016/03/silbersee-logo-bg.png");
background-repeat: repeat-x;
height: 48px;
}
@media only screen and (min-width: 1240px){
#logo {
margin-top: -49px !important;
margin-left: -50px !important;
}
}
@media only screen and (min-width: 1200px) and (max-width:1239px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -175px !important;
}
}
@media only screen and (min-width: 1150px) and (max-width:1199px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -150px !important;
}
}
@media only screen and (min-width: 1100px) and (max-width:1149px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -125px !important;
}
}
@media only screen and (min-width: 1045px) and (max-width:1099px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -100px !important;
}
}
@media only screen and (min-width: 1000px) and (max-width:1044px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -75px !important;
}
}
@media only screen and (min-width: 960px) and (max-width:999px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -50px !important;
}
}
@media only screen and (min-width: 935px) and (max-width:959px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -150px !important;
}
}
@media only screen and (min-width: 885px) and (max-width:934px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -135px !important;
}
}
@media only screen and (min-width: 845px) and (max-width:884px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -115px !important;
}
}
@media only screen and (min-width: 820px) and (max-width:844px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -100px !important;
}
}
@media only screen and (min-width: 800px) and (max-width:819px) {
.top_bar_left {
margin-top: -49px !important;
margin-left: -85px !important;
}
}
@media only screen and (min-width: 765px) and (max-width:799px) {
.top_bar_left {
margin-top: -5px !important;
margin-left: -70px !important;
}
}