How to change the Logo Size

Respected Sir
http://www.berkeley.com.pk/ i have set the logo size http://www.berkeley.com.pk/wp-content/uploads/2015/09/logo-2x.png
width: 388 height 177

this logo size only showing me on Firefox browser

but on chrome or internet explorer, it is showing me 194*58px

i wanted to show 388*177px logo on my site

kindly help me to fix it

i have cleared all history and cookies as well, still having this issue

thanks

Perhaps you should set the width of the 2 columns inside of .k2t-row to 5col each instead of 2col and 10col. Just guessing.

thanks for your reply, tell me what should i change on it

/*--------------------------------------------------------------
	6. Grid
--------------------------------------------------------------*/
.k2t-wrap {
	max-width: 1170px;
	width: 100%;
	margin: auto;
}
.k2t-wrap:before,
.k2t-wrap:after,
.k2t-row:before,
.k2t-row:after,
.cl:before,
.cl:after {
	display: table;
	content: "";
}
.k2t-wrap:after,
.k2t-row:after,
.cl:after {
	clear: both;
}
.k2t-row {
	margin: 0 -15px;
}
.k2t-row [class*="col-"] {
	float: left;
	position: relative;
	padding: 0 15px;
	min-height: 1px;
}
.col-1  { width: 8.33333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%;      }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%;      }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%;      }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%;     }

/*--------------------------------------------------------------
	7. Header
--------------------------------------------------------------*/
.k2t-header.fixed {
	position: fixed;
	z-index: 10000;
	width: 100%;
	top: 0;
}
.k2t-header.fixed > div {
	background: none;
}
.k2t-header.full .k2t-wrap {
	max-width: 100%;
	padding: 0 20px;
}
.k2t-header .k2t-wrap .k2t-row {
	position: relative;
}
.k2t-header .k2t-row [class*="col-"] {
	position: initial;
}
.k2t-logo {
	display: block;
}
.admin-bar .k2t-header.fixed {
	margin-top: 32px;
}
.menu-toggle {
	display: none;
}
.h-element {
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	text-align: left;
}
.k2t-header .k2t-row > [class*="col-"]:nth-child(2) {
	text-align: center;
}
.k2t-header .k2t-row > [class*="col-"]:last-child {
	text-align: right;
}
.k2t-header .k2t-row > [class*="col-"]:last-child *:last-child {
	margin-right:0;
}
.admin-bar .sticky:not(article) {
	margin-top: 32px;
}
.k2t-header .sticky {
	z-index: 10000;
	position: fixed;
	top: 0;
	width: 100%;
}
.boxed .k2t-header .sticky {
	width: 1170px;
}
.k2t-header-m {
	display: none;
}

(It’s good that I wan’t clear. I shouldn’t attempt higher mathematics at such late hours )

Your HTML has this structure:

<body class="home page page-id-38 page-template-default offcanvas-type-default offcanvas-right wpb-js-composer js-comp-ver-4.6.2 vc_responsive">

<div id="pageloader" style="display: none;">
    <div class="k2t-container">
        <header class="k2t-header " role="banner">
            <div class="k2t-header-top" style="">
            <div class="k2t-header-mid" style="">
                <div class="k2t-wrap">
                    <div class="k2t-row">
                        <div class="col-2">   <!-- change to "col-6">
                        <div class="col-10">  <!-- change to "col-6">
                    </div>
                </div>
            </div>

Change <div class="col-2"> and <div class="col-10"> to <div class="col-6"> as incicated above.

You will then have to make other changes within your media queries to handle your header and menu at narrower widths, but that was already the case.

opps

he did with php code :frowning: can you help me now :frowning:

<div class="k2t-header-top" style="<?php echo esc_attr( implode( ' ', $style ) ); ?>">
		<div class="k2t-wrap">
			<div class="k2t-row">
				<?php
					$section = 'header_section_1';
					for ( $i = 0; $i < $col; $i++ ) {
						echo '<div class="col-' . esc_attr( $data['columns'][$i]['percent'] ) . '">';
							k2t_top_header_value( $data, $i, $section );
						echo '</div>';
					}
				?>
			</div><!-- .row -->
		</div><!-- .k2t-wrap -->
	</div><!-- .k2t-header-top -->

If you do not code PHP, then we should move this topic to the PHP category where someone who is proficient with PHP can assist. I do not speak PHP.

You have to probably to need increase the padding-top and value of the main content area. Insert the code into the quick css field file and adjust the value of the css code

.fixed_header #main {
padding-top: 88px;
}

Moved to PHP category.

thanks waiting for solution

i have done it, no effect, it have to be fix with php code

Where is esc_attr() defined and what values does it hold? Is it hard-coded or from a database query?

I see no reason for this being dynamically made, though k2t_top_header_value( $data, $i, $section ); must contain the logo for the first value and your search box in the second. I also don’t see $col defined but I assume it is 2.

With a wrapper width of 1230 (I assume) the best percent width just over the logo size would be 1/3 or col-4 so
$data['columns'][0]['percent'] should be 4.
The remainder would then be 8 so
$data['columns'][1]['percent'] should be 8.

Assuming css is defined correctly, once that first division with a width of around 426 shrinks down to your image size and below, the logo will also shrink.

So edit code where this is defined or the database table that holds these values.

thanks for you reply!

what code should i replace with it, actually i have purchased http://themeforest.net/item/contractor-construction-building-company-theme/11252998

i have written him an email as well, 5 days no reply with their support team!

i have mentioned the part of css as well in start of thread! sir

Well I assume this code is from the header file. What do these lines look line in the template? I assume it would be basic html so you could edit those lines directly.

Well for those following this thread it turns out this is a Wordpress theme. I am not familiar with Wordpress and was trying to figure out where $smof_data is defined… probably within the Wordpress core which sets

$data = json_decode ( $smof_data[ 'header_section_2' ], true ); 

In anycase, viewing page source you can see that the logo in the div class=“k2t-header-mid” and viewing the template files I found header/mid.php which generates this code. As I could not find where to edit $smof_data, I offered a hard coded solution to mid.php.

<div class="k2t-header-mid" style="<?php echo esc_attr( implode( ' ', $style ) ); ?>">
        <div class="k2t-wrap">
            <div class="k2t-row">
                <?php
                    $section = 'header_section_2';
                    /*
                    for ( $i = 0; $i < $col; $i++ ) {
                    echo '<div class="col-' . esc_attr( $data['columns'][$i]['percent'] ) . '">';
                        k2t_mid_header_value( $data, $i, $section );
                    echo '</div>';
                    }
                    */                    
                    echo '<div class="col-4">';
                        k2t_mid_header_value( $data, 0, $section );
                    echo '</div>';
                    echo '<div class="col-8">';
                        k2t_mid_header_value( $data, 1, $section );
                    echo '</div>';
                ?>
            </div><!-- .row -->
        </div><!-- .k2t-wrap -->
    </div><!-- .k2t-header-mid -->

Maybe not the ideal solution but seems to have worked in this case.

Drummin, would you recommend moving this topic to the Wordpress category in search of a definitive solution?

Yes. If not for the OP then for others that might have this issue.

1 Like

thanks its done :smile:

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