Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi guys,

Really impressed with the theme and support, keep it up!

I am starting a new project and as always, the header is a little more complicated than the theme supplies – so would appreciate you help once again.

This isn’t the first time I have created a transparent header and I have used the following code to see the rev slider behind the header:

.masthead {
position: absolute;
width: 100%;
}
.x-navbar {
background-color: transparent;
}
#x-content-band-1 {
background-position: 50% 0 !important;
}

But this time I have stacked the header and the logo section becomes white rather than trasparent, URL’s on following message..

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! #1 Add this bit of code on your child theme’s functions.php file.

function line_bars() { ?>
  <div style="background-color:#fff;min-height: 5px;width: 100%;"></div>
<?php }
add_action( 'x_after_site_begin', 'line_bars' );

#2 On your child theme navigate to this directory: \x-child\framework\views\global\ in there create a file named _brand.php and paste the code below then save.

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h3 class="visually-hidden">' . $site_name . '</h3>' : ''; ?>

<img src="http://withus.lmdev.co.uk/wp-content/uploads/2016/07/sheffield_uni_logo.png" class="univlogo" alt="univlogo" />

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

See #4 on how to align this to left and right.

#3 The navigation menu on your site has already a white border line above and below. Please clarify.

#4 Add this on your custom CSS in customizer:

@media (min-width:  980px) {
	.masthead-stacked .x-brand {float: left;}
	.univlogo {float: right;}
}

And this is to make your logobar transparent.

.x-logobar {
	background-color: transparent;
}

Hope it helps, Cheers!

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please remove padding-top property from following code :

.x-logobar-inner {
    padding-top: 40px;
    padding-bottom: 25px;
}

Add this code :

.x-brand img {
    width: 250px;
    margin-top: 35px;
}

#2

.x-navbar {
    box-shadow: none !important;
}

#3

a.x-brand.img {
    float: left;
}

#4

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #405f6e;
    color: red;
}

Hope that helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Christopher]

Hi there,

#3 Find this code:

@media (min-width: 980px){
.univlogo {
    float: right;
}
}

And update it to :

@media (min-width: 550px){
.univlogo {
    float: right;
}
}

#4

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #fff;
}

#5 Footer columns stack on top of each other at 979px. To center images, please add this code:

@media (max-width:979px){
footer .textwidget a {
    margin: 0 auto !Important;
    float: none !important;
    text-align-last: center;
}
}

Hope that helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Thanks – getting closer!

#5 Right I see. That code doesn’t seem to have done anything.

I do want them to end up central on mobile device but they are stacking too early. Would it be possible to replicate how the header logos respond?

Then I’ll just need to make the sheffield logo you sit on the white line again and reduce bottom padding?

thank you!

[Jade]

Hi there,

Please try this code:

@media (max-width: 545px) {
    .x-colophon.top .x-column {
        width: 100% !important;
        float: left;
    }
}

@media (min-width: 546px) {
    .x-colophon.top .x-column {
        width: 48% !important;
        float: left;
    }    
}

Hope this helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Sorry no still not acting right – I have left it in so you can see it’s result http://withus.lmdev.co.uk/

The header logos respond perfectly, I would love to replicate this?

thanks!

[Christopher]

Hi there,

Please change footer widget areas to one and add both logos within footer 1 widget area :

<img src="http://withus.lmdev.co.uk/wp-content/uploads/2016/07/sheffield_uni_logo.png" class="univlogo" alt="univlogo">
<a href="http://withus.lmdev.co.uk/" class="x-brand img" title="Just another WordPress site">
  <img src="//withus.lmdev.co.uk/wp-content/uploads/2016/07/withus_logo.png" alt="Just another WordPress site"></a>

Hope it helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Friech]

Hi There,

With the current setup of your footer, please remove the css code suggested above.

@media (max-width: 545px) {
    .x-colophon.top .x-column {
        width: 100% !important;
        float: left;
    }
}

@media (min-width: 546px) {
    .x-colophon.top .x-column {
        width: 48% !important;
        float: left;
    }    
}

Add this custom css instead.

.x-colophon.top .x-column {
    	text-align: center;
}

This should make the footer logos behave same as the header logos.

Hope it helps, Cheers!

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Lely]

Hi There,

Please clarify the first issue so we can help you better.

To add menu separator, please add this custom CSS:

ul#menu-footer-menu> li:last-of-type>a:after {
    content: "";
}
ul#menu-footer-menu> li>a:after {
    content: "/";
    padding-left: 9px;
}
.x-colophon.bottom .x-nav li {
    margin-right: 0 !important;
}

Hope this helps.

[Author]

Posts