[charliesaParticipant]

First, I have a stacked header. Then I added text to the right of the logo. It works fine when the display in > 787 px (when the nav links go into a single button)…mobile. Below is the _brand.php code I’m using.

<?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 = ‘‘;

?>

<?php echo ( is_front_page() ) ? ‘<h1 class=”visually-hidden”>’ . $site_name . ‘</h1>’ : ”; ?>

” class=”<?php x_brand_class(); ?>” title=”<?php echo $site_description; ?>”>
<?php echo ( $logo == ” ) ? $site_name : $site_logo; ?>

<span class=”custom-text logo-pointer” style=”font-size:27px”><font color=”#000″>Buster’s Vision Registry for Shelters, Rescues, and Shelters.</span>

First, I tried this CSS:

@media (max-width: 768px){
span.custom-text {
font-size: small !important;
position: relative;
z-index:9999;
}
}

I also tried this CSS just to see if I was in the right place. I was, because the text did over flow onto the slider below on mobile and is covered by the top of the text So basically, I got half the text on the slider, not good.

@media (max-width: 768px){
span.custom-text {
display: none;
}

[LelyModerator]

Hello Charlie,

Thanks for writing in and giving us your custom code! To assist you with this issue, we’ll first need you to provide us with your URL and please clarify how you want to display on less that 787px screenwidth. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[charliesaParticipant]

I know I can’t write. I read my description, and it made no sense really–I gather you got the gist though. It all works fine on a display > 787 px. If less than 787px the text to the right of the logo is behind the masthead ( assume the priority is lower for the text in this case?). Basically, what I want is for the text to show to the right of the logo—like it does on a larger screen on all screens, and to decrease the text size for < 787px.

I can certainly adjust whatever you give me.

http://bustersvisionregistry.org

[LelyModerator]

Hello There,

Thank you for giving us the link.
This happens because your logobar is set to have 99px height. It is define on your style.css like this:

.x-logobar {
    position: relative;
    overflow: visible;
    border-bottom: 1px solid #F2F2F2;
    text-align: center;
    background-color: #FFF;
    z-index: 1030;
    height: 99px !important;
    margin-top: -10px !important;
    margin-bottom: 0px !important;
}

On smaller screen, there’s not enough space to display the logo and the text on the right on one line/row. So the text goes down. But it’s container is restricted display 99px height of the content only, so it ended up hidden.
Please update the following CSS to display the text inline-block on the right of the logo:
@media (max-width: 768px){
span.custom-text {
font-size: small !important;
position: relative;
z-index: 1;
display: inline-block;
width: 75%;
float: right !important;
clear: initial;
}
}

[LelyModerator]

Hello There,

Thank you for giving us the link.
This happens because your logobar is set to have 99px height. It is define on your style.css like this:

.x-logobar {
    position: relative;
    overflow: visible;
    border-bottom: 1px solid #F2F2F2;
    text-align: center;
    background-color: #FFF;
    z-index: 1030;
    height: 99px !important;
    margin-top: -10px !important;
    margin-bottom: 0px !important;
}

On smaller screen, there’s not enough space to display the logo and the text on the right on one line/row. So the text goes down. But it’s container is restricted display 99px height of the content only, so it ended up hidden.
Please update the following CSS to display the text inline-block on the right of the logo:

@media (max-width: 768px){
span.custom-text {
    font-size: small !important;
    position: relative;
    z-index: 1;
}
}

To this:

@media (max-width: 768px){
span.custom-text {
    font-size: small !important;
    display: inline-block;
    width: 75%; /*Adjust this accordingly*/
    float: right !important;
    clear: initial;
}
}

Hope this helps.

[charliesaParticipant]

As you know, it worked perfectly. Pretend I didn’t ask this. Thank You. Well, you could have moved the text 3 PX to the right for < 768 screen size , but oh well. I have been keeping track, you people are correct 99.7 percent of the time. THANKS!!!!

[LelyModerator]

You’re welcome!

Always,
X

[Author]

Posts