How to move Twenty Seventeen logo to the Top menu

@anevins thanks for your support i followed your directions and i like it but I need your help to also move the site tile and Tagline to left side and site tile will be on straight-line with logo first and tagline at the bottom of site tile and i don’t want hover colour on logo, site tile, tagline and arrow down

Hey @rae28, Let’s open a new thread to discuss this: https://www.ads-software.com/support/theme/twentyseventeen/#new-post

When you open a new thread it would be really helpful if you could provide a link to your site.
Otherwise, try emulating the relevant Webpage through a sandbox tool like CSSDesk.com:

1. View your webpage;
2. Right click on the page somewhere and press “View source
3. A new window will appear with all the code of your page. Copy all of that code
4. Go to CSSDesk.com and paste it into the “HTML” section
5. Press the “Share” button in CSSDesk
6. A new URL will appear to the left of the “Share” button, copy that URL and paste it here in this thread

We can then hopefully see your webpage without it going live.

Thanks for your response i’ve start a new thread at this link https://www.ads-software.com/support/topic/how-to-move-twenty-seventeen-logo-site-title-tagline-to-the-top-menu/

• This reply was modified 6 years, 9 months ago by rae28.

Hi Andrew,
putting toghether two or three of your CSS suggestions (slightly modified, and some other code) I achieved to have (you can check here: https://apolis.it ):

– child theme
– menu full page
– fixed top-menu at the top of any page
– site logo in the menu

Now, as the logo image is definitely displayed to big, could you help again to:

– reduce the height of the displayed logo (the original image I loaded is 100px in height), for example using directly the original image loaded…
– insert a search box to the right of the menu

Here the additional CSS I am using in the site:

/* Remove featured image from single post page */ 
.single-featured-image-header {
display: none;
}

/*  Reduce gap just above the content section   */
#content {
padding-top: 35px;
}

/*  Menu full page     */
.navigation-top .wrap {
    max-width: none;
}

/*  Fixed menu on top     */
@media screen and (min-width: 768px) {
    .navigation-top {
        top: 0;
        bottom: auto;
        position: fixed;
    }
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
        margin-bottom: 0 !important;
        padding-top: 77px;
    }
     .admin-bar .navigation-top{
	top: 32px;
    }
}  

/*  Logo in top menu    */
.site-branding {
    padding-right: 70px;
}
.site-navigation-logo {
    position: absolute;
    right: 0%;
	top: 10%;
    width: 60px;
}
@media screen and (min-width: 480px) {
    .site-navigation-logo {
        right: 10%;
        top: 40px;
        width: auto;
    }
}
@media screen and (min-width: 768px) {
    .site-branding {
        padding-right: 0;
    }
    .site-navigation-logo {
        position: static;
    }
    .site-navigation-logo,
    .site-navigation-menu {
        float: left;
    }
    .site-navigation-menu {
        /* 20px = half the height of the logo to vertically center text */
        margin-top: 20px;
    }
}

Thanks again,
K

Hi Andrew,
a little addendum: for the logo I achieved in using “the loaded size image”, now the height is ok !

But could you please help with inserting also the search box in the menu bar ?!

Thanks again,
K

i did, nevermind!

• This reply was modified 6 years, 3 months ago by fdesu.