need help in aligning logo in header

  • Hi,
    I run a website: dbuster.com
    I am trying to align my website logo from center to left. But i am not able to do so. I tried my hands with css by using float function but was unable to do so. Plzz help me out

    below is my style.css file header portion-

    /* ------------------------------------------------------------------------- *
 *  Section: Header
/* ------------------------------------------------------------------------- */
#header { background: #33363b; position: relative; padding-bottom: 60px; }
#header .pad { padding-top: 28px; padding-bottom: 30px; }
#header .container-inner { position: relative; }

.site-title { font-size: 42px; font-weight: 600; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 10px 0; }
.site-title a { display: block; color: #fff; max-width: 100%; }
.site-title a img { display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
.site-description { font-size: 16px; font-style: italic; color: #fff; color: rgba(255,255,255,0.5); float: left; margin-left: 20px; line-height: 60px; padding: 10px 0; }
.site-image { display: block; margin: 0 auto; max-height: 400px; }

/*  header : search
/* ------------------------------------ */
.toggle-search { color: #fff; font-size: 18px; line-height: 24px; cursor: pointer; padding: 13px 20px; display: block; position: absolute; right: 0; top: -50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
.toggle-search:hover,
.toggle-search.active { background: rgba(0,0,0,0.15); color: #fff; }
.search-expand { display: none; background: #26272b; position: absolute; top: 0; right: 0; width: 340px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.search-expand-inner { background: rgba(0,0,0,0.15); padding: 15px; }
.search-expand .themeform input { width: 100%; border: 2px solid #e2e2e2; border-radius: 0; }
.search-expand .themeform input:focus {  }

/*  header : nav topbar
/* ------------------------------------ */
#nav-topbar.nav-container { background: #26272b;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); }
#nav-topbar .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
#nav-topbar .nav-text { color: #fff; color: rgba(255,255,255,0.7); }

@media only screen and (min-width: 1025px) {
	/* fixed nav */
	.full-width.topbar-enabled #header { padding-top: 50px; }
	.full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
	.full-width.admin-bar #nav-topbar.nav-container { top: 32px; }
}

@media only screen and (min-width: 720px) {

	/* common */
	#nav-topbar .nav {  }
	#nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
	/* level 1 */
	#nav-topbar .nav > li { border-right: none; }
	#nav-topbar .nav > li > a:hover,
	#nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); }
	#nav-topbar .nav li > a:hover,
	#nav-topbar .nav li:hover > a,
	#nav-topbar .nav li.current_page_item > a,
	#nav-topbar .nav li.current-menu-item > a,
	#nav-topbar .nav li.current-menu-ancestor > a,
	#nav-topbar .nav li.current-post-parent > a { color: #fff; }
	/* level 2 & 3 */
	#nav-topbar .nav ul { background: #26272b url(img/opacity-10.png) repeat; }
	#nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
	#nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }

}
@media only screen and (max-width: 719px) {

	/* common */
	#nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); }
	/* level 1 */
	#nav-topbar .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
	#nav-topbar .nav li.current_page_item > a,
	#nav-topbar .nav li.current-menu-item > a,
	#nav-topbar .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }

}

/*  header : nav header
/* ------------------------------------ */
#nav-header.nav-container { background: transparent; z-index: 97;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .container { padding: 0 15px; }
#nav-header .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .nav-text { color: #fff; color: rgba(255,255,255,0.7); }

@media only screen and (min-width: 720px) {

	/* common */
	#nav-header .nav {  }
	#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
	/* level 1 */
	#nav-header .nav > li { border-right: none; }
	#nav-header .nav > li > a:hover,
	#nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); }
	#nav-header .nav li > a:hover,
	#nav-header .nav li:hover > a,
	#nav-header .nav li.current_page_item > a,
	#nav-header .nav li.current-menu-item > a,
	#nav-header .nav li.current-menu-ancestor > a,
	#nav-header .nav li.current-post-parent > a { color: #fff; }
	/* level 2 & 3 */
	#nav-header .nav ul { background: #33363b url(img/opacity-10.png) repeat; }
	#nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
	#nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }

}
@media only screen and (max-width: 719px) {

	/* common */
	#nav-header.nav-container  { border-left: 0; border-right: 0; }
	#nav-header .container { padding: 0; }
	#nav-header .nav { padding-bottom: 20px; }
	#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); }
	/* level 1 */
	#nav-header .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
	#nav-header .nav li.current_page_item > a,
	#nav-header .nav li.current-menu-item > a,
	#nav-header .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }

}

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi

    You can put this css in your sylesheet.
    .site-image {
    display: block;
    margin: 7px 0 7px 10px;
    max-height: 400px;
    }

    Or
    Simply change the margin:0 auto; to margin: 7px 0 7px 10px; in line no 558

    Cheers

    Thread Starter anmolbarya

    (@anmolbarya)

    Thanks Extech, that worked great for me.

    I also have one more query.
    How can i add a widget box on right side of my header. As after shifting my logo to left space on the right side is empty. i was thinking to utilize that free space.

    Actually its complicated or may be not ??

    You have to create widget in the function.php and than you have to call the function in header.php.

    Than put some widget in the admin panel and its done.

    You required knowledge of php to do it comfortably.

    Hopefully this will work for you.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘need help in aligning logo in header’ is closed to new replies.