• Resolved Tankman15

    (@tankman15)


    Hi I am using Storefront and I have created a child them.

    I would like to be able to set the height of .site-branding to 52px but that then pushes my secondary-navigation.

    I was wondering how would you move .secondary-navigation to the right of the .search-bar and have the search bar in the middle.

    I would give you a link but at the moment it is sat on a local server.

Viewing 5 replies - 1 through 5 (of 5 total)
  • WEN Solutions

    (@wen-solutions)

    Try the below CSS code.

    .site-branding {
        height: 67px;
    }

    Thanks

    Thread Starter Tankman15

    (@tankman15)

    I have tried that, that was my first thought. If I change the line:

    <img src=”https://localserver/wp-content/uploads/2015/11/basicLogo.png&#8221; style=”display:inline-block;”>

    (manually after the website has loaded) to:

    <img src=”https://localserver/wp-content/uploads/2015/11/basicLogo.png&#8221; style=”display:inline-block; height: 52px; width: auto;”>

    It works but I need to find a way of passing the size to the image but that is something I am not sure how to do. I am aware that it can be done.

    This is what I have in my header section of the style.css:

    /* Draw a line at the end of the header.
    ————————————————————– */
    .site-header {
    // background-color: pink !important;
    border-bottom: 1px solid black;
    padding-top: 5px;
    }

    /* Remove all margins and padding from around the logo.
    ————————————————————– */
    .site-logo-anchor {
    background-color: pink;
    height: 67px;
    border-right: 0px;
    border-bottom: 0px;
    }

    /* Set the size of the logo.
    ————————————————————– */
    .site-branding {
    height: 67px !important;
    }

    /* Set the width of the secondary navigation.
    ————————————————————– */
    .site-header .secondary-navigation { width: 0px !important; }

    /* Set the width of the search bar.
    ————————————————————– */
    .site-header .site-search {
    height: 67px !important;
    // padding-top: 0px !important;
    margin-top: 0px;
    margin-bottom: 0px;
    }

    Don’t worry about the background colour being set to pink in some sections. I do this so I can see what I am altering.

    WEN Solutions

    (@wen-solutions)

    Is the theme you are using is free? No such line of code found on Storefront theme. Sorry for the late response.
    Thanks

    Thread Starter Tankman15

    (@tankman15)

    It is a child theme which I have created. So yes it is free but it is just the Storefront theme and I have uploaded style.css and functions.php into a folder called storefront-child.

    The site-branding I think it is because on the storefront customiser, it has “Customising Site Identity”.

    My functions.php file has:

    // add custom logo to website
    add_action( ‘init’, ‘storefront_custom_logo’ );
    function storefront_custom_logo() {
    remove_action( ‘storefront_header’, ‘storefront_site_branding’, 20 );
    add_action( ‘storefront_header’, ‘storefront_display_custom_logo’, 20 );
    }

    function storefront_display_custom_logo() {
    ?>
    ” class=”logo” rel=”home”>
    <img src=”<?php bloginfo(‘template_directory’)?>/images/logo.png” class=”logo” />

    <?php
    }

    This is the look I am trying to achieve:

    logo search My Account | Shopping Cart

    Where My Account and Shopping Cart are both sat on the secondary menu.

    Does that make sense?

    Oh BTW, thanks for the response ?? Don’t worry about delays in responding.

    Thread Starter Tankman15

    (@tankman15)

    ‘.site-branding img{/*styling for image here*/}’

    That solved the issue. I can’t believe I didn’t think of it earlier. The most simple are sometimes so overlooked.

    Thank you for your help though ?? I know you have spent time on this for me.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Storefront theme place nav2, search bar the opposite way round’ is closed to new replies.