WordPress Tricks

Twenty Seventeen Theme: Modifications of header, footer, sidebar, contents and documentations

allaboutbasic

twenty seventeen documentation

Twenty Seventeen theme is a new theme by WordPress.org and wordpress.com.  It is the chain theme which comes after 2016 (twenty sixteen) , 2014 (twenty fourteen) ,2013 (twenty thirteen),2012 (twenty twelve). Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.Twenty seventeen theme comes with the latest update of wordpress 4.7.  Here  I have shared some  css code to stylize your twenty seventeen theme.

For wordpress.org users  you have to  install   Simple Custom Css  plugins to use my provided css.

You can use my shared code and ask question in the comments section.

You can take my personal help in skype : om2000_cuet

Question 1: If you want to change / reduce height of  header image in twenty seventeen theme

.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 66% !important;
object-fit: fill !important;
width: 100%;
max-height: 100% !important;
display: block !important;
position: relative !important;
}

#wp-custom-header {
height: 100% !important;
}

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(71vh – 32px) !important;
}

Question 2 : If you want to change site title font color, size and family of twenty seventeen theme, use the following css code

.site-title, .site-title a {
color: red !important;
font-family: cursive !important;
font-size: 23px !important;
}

*** To remove page title from twenty seventeen theme and remove gap

.page #content {
padding-top: 13px !important;
}

.page .entry-header {
display: none !important;
}

Question 3: If you want to change site description’s font color, font size and font family

body.has-header-image .site-description, body.has-header-video .site-description {
color: #fff;
opacity: 0.8;
font-family: cursive !important;
font-size: 23px;
}

Question 4: How to change the ‘Proudly Powered By WordPress’ text in the footer

at first go to  Appearance > Editor > footer.php     and replace the mentioned text with the following

twenty seventeen proudly powered by wordpress modification


<div class="site-info">
<a href="https://wordpress.org/">Your site footer links and contents</a>
</div>

twenty seventeen gap reduction

Question 5: How to reduce gap just above the content section

#content {
padding-top: 35px;
}

Question 6 : How to increase Twenty seventeen content section width

***  at first increase the wrapper width ***

.wrap {
max-width: 1145px;
padding-left: 3em;
padding-right: 3em;
}

*** 2nd — increase  left side content section width ***

#primary {
width: 70% !important;
}

*** 3rd — decrease  right sidebar width ***

.has-sidebar #secondary {
width: 26% !important;
}

twenty seventeen content and sidebar width increase

Question 7 : How to remove sidebar from single post page in twenty seventeen theme and make post page full width

.single-post #secondary {
display: none !important;
}

.single-post #primary {

width: 100% !important;
}

twenty seventeen sidebar remove full width post

Question 8 : How to remove featured image from single post page in twenty seventeen theme

.single-featured-image-header {
display: none;
}

Question 9: How to remove Post date and post author in twenty seventeen theme?

.entry-meta {
display: none !important;
}

Question 10 : How to change font family, font size and font color in single post page  title of  Twenty seventeen theme

.single-post .entry-title, .page .entry-title {
font-size: 1.625rem !important;
color: darkred !important;
font-family: cursive !important;
}

Question 11: How to change font family, font size and color of  Post date and  Post author

.entry-meta * {
color: darkred !important;
font-family: cursive !important;
font-size: 13px !important;
}

twenty seventeen category page modification

Question 12: How to change home page or archive page (category page)  single post title and archive page title’s  font color, font size and font family in twenty seventeen theme

.entry-title, .entry-title a {
color: darkred !important;
font-family: cursive;
font-size: 24px !important;
}

Question 13: To change category name  at the top of archive or category page at twenty seventeen theme

.archive .page-header h1.page-title {
color: darkred !important;
font-family: cursive;
font-size: 16px !important;
}

Question 14:  How to hide or remove the category name at the top of category or archive page in twenty seventeen theme

.archive .page-header h1.page-title {
display:none !important;

}

Question 15: How to remove Featured image from single post page in twenty seventeen theme

.single-post .single-featured-image-header {
display: none !important;
}

Question 16: How to change content section font color, font size and font family in twenty seventeen theme

.entry-content {
color: black !important;
font-size: 15px !important;
font-family: cursive !important;
}

Question 17: How to remove comments section in twenty seventeen theme

#comments {
display: none !important;
}

Twenty Seventeen footer section background

Question 18: If you want to change background color of footer widget /  Prooudly Powered by WordPress section

#colophon {
background: darkred;
}

#colophon * {
color: white !important;
list-style: none !important;
border: none !important;
box-shadow: none !important;
}

Question 19 : How to change sidebar widget title’s font color, font size and font family in twenty seventeen theme

.widget-title {
font-size: 15px !important;
color: darkred !important;
font-family: cursive !important;
}

twenty seventeen widget title background and centralize title

Question 20 : How to center the widget title,  provide background color  and remove space below the widget title

.widget-title {
text-align: center;
background: lightgrey;
padding: 5% !important;
margin-bottom: 0px !important;
}

Question 21:  How to  change links color, font size and font family  showing in widget  section in twenty seventeen theme

.widget li a {
color: darkblue !important;
font-family: cursive !important;
font-size: 14px !important;
}

Question 22: How to change hover link underline and hover font color for links showing in widget section

.widget li a:hover {
box-shadow: none !important;
color: darkred !important;
}

button background color twenty seventeen

Question 23: How to change submit or other button background color in twenty seventeen theme

button, input[type=”button”], input[type=”submit”] {
background-color: darkred !important;
}

Question 24: To move Navigation menu to the top

@media (min-width: 760px) {
.navigation-top {
position: absolute;
top: 0px;
width: 100%;
height: 70px;
}
}

as you wanted to put navigation menu to the top, the inner page header image may be overlapped, so use this code too

@media (min-width: 760px) {

.custom-header {
position: relative;
padding-top: 70px;
}

}

Question 25: How to create Single / One Page Website using Twenty Seventeen Theme?

Answer:     Here it is ; Creating Single Page Website

Question 26: Twenty Seventeen Child theme for major theme file modifications

Answer :  Download Twenty Seventeen Child Theme Zip file  for your major modifications.

If you have any issue feel free to ask me question here in comments section

OR

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

852 thoughts on “Twenty Seventeen Theme: Modifications of header, footer, sidebar, contents and documentations”

  1. Hello,

    Thanks for this post! Really helpful.

    I do want to change the website title and description font family and size but …. applying your code in the beginning of style.css doesn’t work.

    Am I doing something wrong ?

    Thanks!

    Like

    Reply

      2. It does work for the site title but not for the site description …

        Also “body”is highlighted red in the Custom CSS editor

        .site-title, .site-title a {
        color: #333B97 !important;
        font-family: helvetica, cursive; !important;
        font-size: 36px !important;

        body.has-header-image .site-description, body.has-header-video .site-description {
        color: #333B97;
        opacity: 0.8;
        font-family: cursive !important;
        font-size: 23px;

        Any suggestion ?
        🙂

        Like

      1. Hi Om
        Thanks a lot, finally for the logo, I found a solution.
        But I have another question 🙂
        I add a css code to remove the title of the pages, it’s ok and works well but now I have a big white gap instead of the title, certainly dur to the padding or margin, can you tell me how to reduce it ?
        Do you have a tuto to make the menu one page responsive as on the twenty seventeen demo ?
        It would be nice
        Thanks again 🙂
        Johanna

        Like

      3. Hi Om
        It work for the page itself but not for the page on the scrolling homepage, and I would like to reduce the gap on the home page when I scroll with the mouse. I don’t know if you will understand well… 🙂

        Like

      5. You can go on my website surlinstant.com
        And on the homepage, when you scroll with the mousr, you have a fisrt text block which begins with “Felicitations”. There is a big white gap before.
        If you continue scrolling, the second text block has also the white gap and so on.
        Do you see it?

        Like

      6. HI Johanna
        please try this code

        .home .entry-header {
        margin: 0px !important;
        }

        .home .wrap {
        padding-top: 20px !important;
        }

        These codes are applicable for homepage
        please let me know if they works

        Om

        Like

      9. Hi Om
        As you know well the twenty seventeen theme, can I annoy you one more time?
        I uplaoded a video on the header, on mobile device (iphone), the video doesn’t appear, do you know why ?
        I uploaded mp4 video with 7mo weight but the theme is probably not video responsive, can you confirm ?
        Thanks a lot and happy new year 🙂
        Johanna

        Like

      10. HI Johanna
        Happy New Year to you too 🙂
        sorry for the late response..was busy whole day..

        the video is not showing in your mobile…i guess the mobile browser you are using doesnt support tag you used to show the video…
        if u use youtube video..does it show?
        or
        better you use any other sort of plugins
        Om

        Like

      11. Hi Om
        Thanks for your reply. Even when the video is on youtube, it is not responsive on mobile phone (iPhone), don’t worry, i will do without. I think it comes from the theme.
        Thanks a lot for all
        Johanna

        Like

      13. thanks a lot for your help, I prefer to keep my videos on my server 🙂 No problem for the responsive video, I found another solution.
        Do you know if it is possible on the homepage, to have a background image on the first text “Felicitations” ?
        Many thanks again :-)) you are wonderful !

        Like

      14. Hi Johanna
        thanks..sorry for the late response (facing little family issue)
        yes there are other solution (using plugins…i cant suggest them properly to you as it will need to check dashboard)…
        and.. i found you are using an image for the text Felicitation….so u need background image where?
        can u share me any mockup screenshot about ur issue?

        Om

        Like

      15. Hi,
        I have pretty much the same question. I want to place my logo in the upper left corner of my front page, because it would fit much better with the colours of the head photo. I managed to put it somehow more on the right side with the Advanced Twenty Seventeen plugin, but can’t find how to move it upwards. You can find my site at http://thedioramaproject.com/

        Thanks!
        Sanne

        Liked by 1 person

      17. Hello, I encounter the same problem as Johanna, my video in background does not pass on mobiles and tablets.
        The video is hosted on youtube because too heavy for the server and I want it to start on all types of media. Can you help me please

        Like

      23. Hello
        On my laptop the video works well.

        The problem arises for tablets (ipad …), cell phones (windows phones, samsung, iphone …)

        Like

  4. Hi, Thank you very much for such a helpful post. I removed the header but I am having some trouble removing a white bar at the top of the page, maybe you could please guide me on which way to go to do this.

    Thank you very much

    Like

    Reply

    1. HI
      thanks ..sorry for the late response (facing little family issue)
      so you want to increase width of your left side content section so that it almost touch the right sidebar?
      please let me konw

      OM

      Like

      Reply

  7. Hi Om,

    I would like to float the text on a page (not a post) to the left (under the title) instead of floating it to the right, as is the default. Do you have any ideas?

    Cheers,
    Chris

    Like

    Reply

    1. Hi Chris
      thanks …sorry for the late response
      would u mind to tell in which site u want to do the changes please?
      also
      would u mind to clarify me the issue some more please? sorry didnt get the idea of ur issue properly

      Om

      Like

      Reply

      1. Hi Om,
        It was a very quick response, thank you! What I want to do seems to be a little complicated. I would like to change the page template so that the text appears on the left side of the page, under the heading. At the moment, it appears on the right of the page. I have not launched the site yet, but the temporary sandbox site is here: rudge.philamentjournal.com/blog/. On the pages, such as the “About Chris” page (http://rudge.philamentjournal.com/blog/about/), I want to move all the text to the left. This, I think, involves changing the php in the page template page, and maybe the functions.php?
        Thanks for you help!
        Chris

        Like

  8. Hi Om !
    Hope I can ask a you question about the Twenty Seventeen theme. I’ve installed the wpforo (forum) plugin and I want to make the forum full width.. with that I mean I don’t want the column with the page title, but only the content (the forum) in full width. With your question 6 answer above I couldn’t make it work.. a couple of other things worked perfekt. Second question is the main content.. it’s wider now but the title column still to width… how do I reduce this without modifiying the content column either ? Hope you can help me !
    With kind regards, Martijn (the Netherlands)

    Like

    Reply

      1. I changed the site now to ‘one clumn’ and the forum is wide (wide template) but.. this is not what I wanted.. I would like to have 2 columns with the page title column only very small (http://www.mfc-ikarus.de/wp/community/)

        Next problem seems to appear in the openingsscreen (scroll down) the weather-station widget is now below the text and the widget does not appear beside the text..

        Like

  9. Hi, Thank you very much for such a helpful post.I increase the content section width with code #6.It works well on my PC,but not suit for my phone.What should I do if I don’t want the code works on my phone?Thanks for your reply!

    Like

    Reply

    1. HI Jiang
      thanks..sorry for the late response…

      to solve the issue please wrap my code in the following way

      @media only screen and (min-width: 980px) and (max-width: 20000px) {
      my code will be here
      }

      please let me know if you got it

      OM

      Like

      Reply

      1. Hi OM
        Thanks for your reply.I have used the method and it really works well.My problem has been solved.Thank you very much!

        Like

  10. Hi Om,

    Thanks for your help. After looking after a solution for the ‘Proudly Powered By WordPress’, I finally found your web, and after a couple of minutes I fixed it!
    You Rock!

    Cheers

    Mario

    Like

    Reply

  11. Hi Om!

    Thanks a lot for your codes about Twenty Seventeen, it helps a lot. Can I ask one more question?

    How can we remove the underline from the link? I try a lot of codes but none seems to work :/

    Thanks for your help 🙂

    Ogzy

    Like

    Reply

      1. Hi Om,

        Thanks for your answer! I tried your code but it doesn’t work. The underline is still here!

        Here is my website in case you want to check: sophierabia-psy.ch

        Thanks a lot for your help

        Like

      2. HI Ogzy
        your site showing Under Construction…
        would u mind to deactivate it for a day so that i can check?
        and is the underline in links showing in homepage?
        let me know please
        Om

        Like

  12. This is all great, thanks so much for the info. I was wondering if I could get some help. I followed all the instructions on question 6, saved/updated it all, and it’s not changing the content or side bar widths. If you have any insight on how to trouble shoot it, I’d so appreciate it. Thank you!

    Like

    Reply

  13. Thank you for this post! Having a list of all of the selectors really helped me, especially when figuring out how to remove the padding around the page content.

    Like

    Reply

  14. Hello Om, First, thank you for the helpful post, I used the footer code and it worked perfectly. I cant seem to get the code to remove the side bars to work, on a state front page. Is there any way you can help me please?

    Like

    Reply

    1. Hi Wolfe
      not sure..but would u mind to try this code please?

      .custom-header-media {
      height: 100% !important;
      }
      header img {
      position: relative !important;
      }

      let me know what u get

      Om

      Like

      Reply

      1. Nope, not working. I even gave it a shot at placing it with the @media brackets as well as at the end of the css. And since it’s the width rather then height that is the main issue for me, I tried that as well. In fact it doesnt seem to effect it all. the @media version of the header image is unchanged for the cut off. annoying as hell.,

        Like

  16. Thanks so much, very helpful! I am looking to increase the width of the content on on all pages (not posts)… is their a way to do this? Also, I donloaded CSS plugin, – do we just put all these codes in that box … just making sure … it seems awfully easy, but I have never done it before – I am using 2017 and would like to make some of these changes above, thanks again so much!!!

    Like

    Reply

    1. HI Kevin
      thanks
      would u mind to share me the site url where you are working on please?

      and
      yes..just put the css code in the box and it will work

      and..
      you want to increase width 100% by removing the sidebar?

      let me know
      Om

      Like

      Reply

      1. Great – thanks – just launched though it is not done, but wanted to check some stuff with it live … http://www.kevinmccarthyshows.com – I’d like the width to be 80 or 85% so there is some padding on each side… right now it’s way to thin.

        Here’s a couple of issues now that I have it up… If I am asking too much, I apologize – whatever you can do to help is fine.

        1. Width on each Page -I think 100% might be too much? whatever you think…
        2. I tried to change the text font to regular black, but it won’t let me for some reason – I have Advanced Twenty Seveeteen
        3. There is a ton of space between content and the Menu bar… I tried putting your code into CSS but didn’t work for me
        4. Can I change the fonts on the entire site to Arial? Can you explain how?
        Or is there one your suggest? I don’t like the current one… something like Arial would be great.
        5. Can I easily make one of the menu buttons a direct link to another page in my site? In the drop down in shows I have a couple that repeat.
        6. Footer – Looks like crap, I try to make changes but not sure how to change things up

        I did this site on my own – it was the first time I ever did anything in WordPress… I got farther than I thought I would! Everything is backed up so that is all good..

        I am so grateful for your help!

        Thanks so much!

        Kevin

        Like

      2. ONe more thing, when updating the Simple CSS – if you have multiple codes, where do they go? all in between brackets? or doesn’t it matter…

        Sorry again if I asked for too much… if it is too much, just let me know, If you can help, that’d be huge… don’t know where else to turn, got pretty far on my own, but now need help……thanks!

        Like

      3. Here’s more info that might help – I cut and pasted this from an older website not done in wordpress, there was HTML attached to it and I wonder if that is effecting something… for example… I have the plug in “Advanced Twenty Seventeen” and yet if I go to Global Advance Typography… I changed the text color to solid black and the Link color to Red… but neither is working… something is preventing the color of text and the color of link from changing…. if I have too many questions, maybe you do a paid help session? just don’t to ask too much…

        Like

      4. Ok, sorry again about all the posts and all info… I researched more and just figured out a few things! Thanks so much!

        #1 – working on it right now

        #2 is done – see code
        #3 is done – see code
        #4 is done – changed it to Open Sans
        #5 is done – I used a plugin
        #6 – found youtube video on how to do it

        .site-header-main {
        padding-bottom: 0;
        }

        .site-content {
        padding-top: 0;
        }

        .entry-content p, .entry-content b, .entry-content strong {
        color: Black !important;
        font-size: 95% !important; (brought the font size down a bit which is what I wanted, too)
        }

        Like

  17. Hi Om, Maybe you can help me? On the twenty seventeen theme, I would like to make a change if possible to the top navigation menu. I would like to make the menu two lines instead of one line – where I can pick 3 or 4 links that I want on the first line, and then 3 or 4 other links on the second line. I know I can place many links on the menu and it will become two lines long (but it’s really one line long with overflow). Can I do this? For example: (first line of menu): Home, Page 1, Page 2, Page 3 —— (then second line of menu) Page4, Page 5, Page 6. I appreciate your time and look forward to your answer. Thank you so much. JS

    Like

    Reply

      1. Thank you for taking the time to answer my question, Om! I do appreciate it. So, I hate to bother you more, but could you give me a little more instruction on how to do the information you’ve mentioned above? Which file would I modify? Do I look for certain information and just copy and paste a second instance right under the first one? I’m using the twenty seventeen theme if you can use that as an example. If it’s too complicated and you’d rather not tackle that much information, I surely understand. Thank you again in any case! Joe

        Like

  18. i have a problem. I have adapted the solution of question 1 in the Style.css. However, I now have the problem that my header image is consumed. If I reset the changes to the original, but nothing happens and it remains so. Do you have a solution?

    Liked by 2 people

    Reply

  19. Hi Om,
    Great post! super helpfull.
    My question is: how do I get rid of the word ‘POSTS’ above my frontpage post.
    My site only has one post and a sidebar. I don’t need to specify that posts are shown on the left side of my frontpage.
    Thanks
    Olaf

    Like

    Reply

  20. Thanks in advance for your help! Trying to wrap text around slider with picture right justified…

    Code is likely wrong, but I looked all day and couldn’t find anything online wrap text with Unite Gallery – if there a better gallery for this or …

    Is Code Wrong

    https://kevinmccarthyshows.com/?page_id=370

    code

    This program was developed by Kevin specifically for a school in the Clarence district using “RESPECT” as their main theme for the year and the show was a big success! The students learn important lessons on how to be respectful to everyone, not only teachers & parents, but fellow peers as well. Kevin shows students why [unitegallery Respectslider catid=1]
    it is important to be respectful and outlines the key ways of giving and showing respect. Kevin discusses how everything you will want in life requires getting along with other people. Learning how to give and show respect is one important key to life-long success. Kevin excites audiences with fun, familiar, and upbeat songs and actively engages the students for an enjoyable and memorable learning experience.

    [/code]

    Like

    Reply

  21. Hi, thanks for your help! I need one more customization… I need my logo centered in the header and title below it centered, also in mobile mobile. Can you help me?

    Like

    Reply

      4. I guess i solve it with media query:

        @media only screen and (min-width: 768px) and (max-width: 10000px) {
        .site-branding {

        padding-right: 25em;
        padding-left: 25em;
        }
        }

        Can you delete link from website from my post please?

        Like

  22. Hey Om,

    I want to remove the Page titel und follow your instructions from question 2, but nothing happens. At the moment i have two page titles, but would like to have only my own.
    Do you have a solution for me?

    Best Regards
    Marcel

    Like

    Reply

      1. Hey Om,
        No i want to remove for example the “Start” over the “Willkommen” from the “Willkommen”-Page.

        Is that possible?

        Regards
        Marcel

        Like

      2. Hey om,
        my problem is done.
        Other question is how can i give the upper menu more wide, so that all menu points are in a row?

        Regards
        Marcel

        Like

  24. Hi Om,
    Thanks for a lot of useful information, much appreciated.
    I’m almost done with my personalised twenty seventeen website theme – free version (working on it in desktop server mode before I publish it). But I have spent hours trying to figure out how I can have both the logo (to the left) and menu navigation (to the right) in the header? I have removed the site title and tagline and tried to add so many different CSS codes to my custom CSS plugin but nothing has worked unfortunately.
    Thank you so much in advance,
    Best regards,
    Cecilia

    Like

    Reply

      1. Hello OM,

        Thanks for your prompt reply.

        I would like to avoid to set it live yet.

        I can send you screengrabs if that would help?

        Thanks, -Cecilia

        On Fri, Feb 3, 2017 at 1:50 PM, All About Basic wrote:

        > allaboutbasic commented: “HI Cecilia actually it would better if i could > check your site Live… it will require theme file modifications to do so ( > as i guess) OM” >

        Like

      3. Hello Om,

        Of course, not a problem. Please see attached zip file I just backed-up and downloaded.

        I would like my header to be displayed as this website: http://liviaskitchen.co.uk/ (with logo, menu and social media on the header, same line but with the social media icons at the very end instead).

        Also, with the featured image that I have with the page called The Smaka Story at the front page I would like to display it like http://liviaskitchen.co.uk/ (several of photos slides with arrows on the side for the guest to flick through, I don’t need to be able to add text on top of the photos), is this possible?

        I just saw that my mobile version is showing this white border on the top and bottom of the menu, I have tried to remove it but haven’t succeeded.

        Many thanks, Om. – Cecilia

        On Fri, Feb 3, 2017 at 2:12 PM, All About Basic wrote:

        > allaboutbasic commented: “HI Cecilia ok.. share me the backup of ur > wordpress ( zip it and give me with database) Om” > Respond to this comment by replying above this line > > New comment on *All About Basic * > > > > *allaboutbasic* commented > > on Twenty Seventeen Theme: Modifications of header, footer, sidebar, > contents and documentations > . > > > in response to *smakasnack*: > > Hello OM, Thanks for your prompt reply. I would like to avoid to set it > live yet. I can send you screengrabs if that would help? Thanks, -Cecilia >

        Like

      1. Hi Om,
        No, I haven’t modified the theme file only added the css codes using the TJ Custom CSS plugin and add it straight to the Appearance – Custom CSS and save. Is this incorrect? I’m using the twentyseventeen theme,

        Thanks,
        – Cecilia

        Like

      2. HI Cecilia
        thanks..sorry for the late response
        i tried to import the database in my localhost wordpress setup and it is showing error?
        have u exported the database properly?

        let me know
        Om

        Like

      3. Hi Om,
        Thanks for your email. Yeah I belive so, I’m accessing my wordpress via the desktop server and loggin in on wordpress.com and I don’t have any error message showing up. What would you suggest me to do or how can I find out if I have exported the database properly?
        Thanks,
        Best regards
        Cecilia

        Like

    1. Hi
      please try this code

      .header-image-slider {
      margin-bottom: 0px !important;
      }

      let me know if that helps

      *** it will reduce gap between header image and your image (holding guiter)

      Om

      Like

      Reply

  29. Hi Om,
    First of all, Thanks a ton for all your useful tips.
    In my website, I want my content width to be full width. I DO NOT want sidebar or sidebar space either to the right or left. Is it possible? If possible please provide with a suitable CSS. The one mentioned in your tips didn’t work.
    Second, I have embedded some videos in my website. I want to decrease the height and width of the video window, so that in a row I can fit upto 3 columns of video. Please help.
    TIA

    Like

    Reply

      1. Hi Om,
        Please find the url where I want full width. Similarly I want full width in all the pages.
        http://www.yourhallofframe.com/who-are-we/

        No, I have not installed Simple Custom CSS. I try to avoid using many plugins. But I am using the Additional CSS option in the Customization menu.

        Also let me know the solution regarding embedding videos.
        Thanks.

        Like

      2. Hi
        for full width page (mainly to increase the content width) try this

        #primary {
        max-width: 100% !important;
        }
        .wrap {
        max-width: 1000px;
        padding-left: 1em !important;
        padding-right: 1em !important;
        }

        Regarding video..
        share me the page url where u used the video

        Om

        Like

  30. Hi I tried to insert your code but I continue having the same problem….the width of my homepage is limited….can you help me?

    Like

    Reply

      1. That’s strange – I just tried it on my friend’s computer and it worked ok… I wonder why that would be. Do I need a Gravatar account?

        Like

      3. Perfect! Thanks so much Om, you da best. Thanks for your fantastic page. Will come to you for any future queries.

        Like

      4. Hi Om, I managed to set the slider to the correct size for my screen, but it is obviously different on different screen sizes. Do you know of a way to make the page responsive?

        Like

      5. Hi ALed
        just checked..i found ur slider is responsize…and it is responsive as ur site is already responsive

        have u found any page which is not responsive?
        let me know

        Om

        Like

      6. That’s interesting- I get a white band at the bottom when looking on a Mac screen – although it fits my PC laptop perfectly. If I made the image larger, would it resize automatically? Thanks Om.

        Like

      8. In fact could there be a bit of code that would zoom the page so that if you were viewing on a mobile device it would fill the screen? Sorry to keep bothering you!
        Aled

        Like

  33. Hi Om, need your assistance. I try to used your trick number 6, but it doesn’t work at all. what I do is just copyed your script. please help me.
    thank you

    Like

    Reply

      1. Hi OM, I am also wanting to replace my header image with a slideshow. I see you’ve been so kind to help others here! Would you mind helping me? coloradofruit.org/wchs

        Like

      2. Hi
        yes….thanks..
        i can replace the header image with slider.
        that need code change..so..it would better if you contact me in my fiverr profile….
        as i will need to check ur dashboard for that
        OM

        Like

  36. Hello ! thank you so much for your article. Tho I have a little problems and I saw a person Jiang commented you about the width code column doesn’t work for phone, you suggested to her to put :
    “to solve the issue please wrap my code in the following way

    @media only screen and (min-width: 980px) and (max-width: 20000px) {
    my code will be here
    }

    please let me know if you got it”

    But I don’t get it, as I had your code in the “additional css” I dont know where to put what you suggest and which code. Sorry I’m bit lost for this.
    Thank you for your answer

    Like

    Reply

      2. Hi Chucky
        to make your site wider for mobile view ( twenty seventeen theme) try this code

        @media only screen and (min-width: 240px) and (max-width: 580px) {
        #primary {
        width: 100% !important;
        }
        .has-sidebar #secondary {
        width: 100% !important;
        }
        }

        let me know if it helps

        Om

        Liked by 1 person

      1. Hi Tom
        to remove date from homepage posts

        .entry-meta {
        display: none !important;
        }

        To remove the word “Post” from homepage post try this

        header.page-header {
        display: none !important;
        }

        *** To change the top image…

        have u checked Appearance > Customize section?

        Om

        Like

      4. Hi Tom
        To reduce gap from the bottom of homepage posts try this code

        .home article {
        padding-bottom: 12px !important;
        }

        To reduce gap between sidebar widget try this code

        .widget {
        border-top: 2px solid black !important;
        padding-bottom: 12px !important;
        }

        *** Regarding menu issue
        it will need header php file modifications

        Om

        Like

      1. Hi Om, thanks for the response. On the various menu pages i.e: about us, our services etc. my images are at the top + stretch across the screen. I want clients to see my copy immediately without having to scroll past the image first. How do you: 1. minimize the image PLUS 2. align images to the left side of the screen with the copy on the right?

        Greatly appreciate your help.

        Like

    1. HI John
      are u searching this? please try these codes

      .entry-header {
      width: 100% !important;
      float: left !important;
      }

      .entry-content {
      width: 100% !important;
      float: left !important;
      }

      *** you are showing the contents to be centered..so… the contents will be centered aligned

      let me know if it helps?
      Om

      Like

      Reply

  42. Hey!

    Many thanks for sharing this.
    I searched the forums through wordpress and they didn’t solve my problem.
    One of your code edits helped a resizing issue that I had on a mobile screen.

    Best Regards,

    Fernando A

    Like

    Reply

  44. Hi OM
    I am new to this, but I am using Twenty Seventeen and I think the text possible to put on top of the header picture is too small. I have two lines:
    http://motorcycle-touring-norway.no/
    I did copy your code in question #2 into my plugin Google Fonts. I had to add a new CSS Selector, and I just glued the whole code in. It is then all in one line.
    Trying to change the start picture text still did not work. Am I doing it all wrong?
    Thank you.

    Like

    Reply

      1. Thank you OM. I did, and glued it in and updated. But how will I find it in the dashboard to alter the text? Somewhere under Appearance? Think of me as your grandmother with her first PC :-))

        Like

      3. I think I understand it. I just alter the “font size” in the code you made, or put green instead of red and press update? Well, no effect on the text. The codes to alter is over-lined in the code overview. Does that matter? Must the / and / have to be in there when putting in your code in s.c.css, or is your code the only thing that needs to be there?
        I am running WP 4.7.2 and in the s.c.css details it says: Warning: This plugin has not been tested with your current version of WordPress.

        Like

      4. HI Mctourin… that plugins is good…and don’t worry about the warning message.. yes.. just put my code in the “Custom Css” section

        please check this link … where i have shared you a screenshot…hope that will clear your idea

        Feel free to let me know if u have any other question
        🙂
        OM

        Like

      5. Yes it worked now. There is two different text lines on the heading. Shall I just hit enter a couple of times and then insert the code for the other line? Have you got that code as well?
        I really appreciate your help

        Like

      6. Hi Mctourin…
        the code starts like this

        css-selector
        {
        codes;
        }

        so..where the 2nd brackets ends…. u have to put your next code below it..
        u got the point?

        let me know 🙂

        Om

        Liked by 1 person

    2. I got it. I am trying to find the code for “come ride with me” as you can see on my page, but I am not sure…

      Like

      Reply

      1. Hi Mctourin
        that is Site Description… try this code

        .site-description {
        color: #666 !important;
        font-size: 23px !important;
        font-family: cursive !important;
        }

        let me know if it helps

        Om

        Like

  45. Hello,

    I would change the color of the menu icon in white as well as the text on the responsive menu I specify and the bottom of the drop down menu.

    thank you very much

    Best Regards,

    Joël

    Like

    Reply

    1. Hi Joël

      to change the Responsive menu icons color…try this code
      .meanmenu-reveal span {
      background: darkred !important;
      }

      Also
      u want to change the font color of mobile menu drop down items? or background color of drop down menu?

      let me know please
      Om

      Liked by 1 person

      Reply

      1. Hi OM, I want to change the font color of mobile menu drop down items… Could you help? I would also like to have the full hight of the page header image, like on the Home page. Hope you can help! Have a great weekend! Greetings, Daphne

        Like

      2. Hi Daphne
        to change the mobile menu font color

        @media (min-width: 240px) and (max-width: 700px) {
        #top-menu li.menu-item a {
        color: red !important;
        } }

        let me know if it helps

        Om

        Like

      3. Hi again, I think you have missed the second part of my question on a topic above: I would also like to have the full hight of the page header image, like on the Home page. Hope you can help!

        Like

  46. Thanks in advance fro your help… my site is not working right on the web browser – Edge windows 10….(I can’t see any of the sliding info!)… it works on Chrome fine and on my phone…. and when I am in WP editing mode in Edge it works fine… but if I just type in the address in address bar it doesn’t work… Alll my plugins are updated except LayerSLider WP… when I go to update it says I have to activate from website and website say $20… I am happy to do this but not sure if that is needed or not… I saw a list of files it was using from my site, but it’s been a few months since I did the site and not sure (I must have used it but don’t remember)… Do I need to pay for this update?

    Thanks!

    Kevin

    Like

    Reply

      1. Yes it seems like it is good on all other browsers but Microsoft Edge both on this computer and my computer upstairs… It just stopped working and when I checked the site that is when I noticed the upgrade thing, but not sure if I have to pay that or not? (see e-mail above)…. (the site works completely fine on Chrome and Firefox)…. I am stumped as to that is happening and that is why I asked about Layerslider… I need to the site to work on all browser before I launch it…. I am so thankful for your help!!!

        Thanks!

        Kevin

        Liked by 1 person

  47. Hi, thanks for the great post. I was hoping you could help me figure out how to make the main image left-justified when viewed on a mobile device. It’s centered by default, which looks fine on desktop, but on mobile I’d like the user to see the left portion of the image instead of the center. Thanks!

    Like

    Reply

      2. Hi Budsman

        please try this

        @media (min-width:240px) and (max-width:760px) {
        #wp-custom-header img, #wp-custom-header {
        object-fit: fill !important;
        }}
        let me know if it helps?

        OM

        Like

      3. Awesome, thank you! I tweaked your suggestion a little bit. The object-fit property ended up changing the aspect ratio of the image on mobile which caused it to look smushed, so instead I tried “object-position: 0 0;” and that got me exactly what I needed. Thanks again.

        Like

  48. Hi Om,
    I’m having troubles with the width settings. It works on all the pages except on the static starting page “home”. Some help would be appreciated.
    With kind regards,
    Danny

    Like

    Reply

  49. Hi Om,
    Thanks for replying.
    Get the same width of my content (photo’s, text) on my static starting page as on all other pages. Currently the static page doesn’t use the same width.

    This is the code i’m using in the simple custom css:

    #primary {
    max-width: 100% !important;
    }
    .wrap {
    max-width: 1000px;
    padding-left: 1em !important;
    padding-right: 1em !important;
    }
    .site-content {
    padding-top: 1em;
    }

    .page-header {
    padding-bottom: 0;
    }

    @media screen and (min-width: 48em) {
    .page.page-one-column .entry-header,
    .twentyseventeen-front-page.page-one-column .entry-header,
    .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 0;
    }

    Like

    Reply

      1. Hi Om,
        Yes, my content on my static page called ‘home’. All the other pages are fine (wider content) except my starting page….

        Like

  50. Some great tips here thanks. I’m aiming to resize the site header, but when I do so a grey semi-transparent section appears just below where the site title. It seems to be linked to ‘custom-header-media’, but I’m having no luck in making it completely transparent. Any ideas please?

    The site is being built locally, so I can’t share the link unfortunately:

    https://drive.google.com/open?id=0B5kitvfP-0IpdTFmV2dka1RnS2s

    https://drive.google.com/open?id=0B5kitvfP-0IpTDk3WXFIaGJUd2c

    Like

    Reply

  51. Thanks for this great post, I have used several of your scripts with great success. I wondered if you could help me with a question.

    I see your code for editing the height of the homepage header image.

    I have moved the main nav to the top of the screen. Now I would like to increase the header image size on the single-page and single-post views but not on the home page.

    Is this possible?

    Like

    Reply

      1. I have set up example here http://test.masero.co.uk/

        You can see any page that is not homepage the header does not display correctly.

        I would appreciate any help. Here is the code I use to move menu to top:

        @media screen and (min-width: 48em) {
        .navigation-top {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 70px;
        }
        }

        Thank you!

        Like

      3. This code changes all pages including the homepage. This is fine for my website.

        Thank you very much Om

        .custom-header {
        padding-top: 70px !important;
        }

        Like

  52. Hi, my sidebar for search, comments and posts is gone for all pages except the blog page once i applied you css. is there a way i can reverse that?

    Like

    Reply

  53. Hello,
    Thank you so much. I have never seen such collection of useful css code for a theme all in one place and well organised.

    I have implemented several of them without and problem. Also I found the solution to restore the responsiveness for mobile removed by code #6. You answered it in the comment section.

    Just one problem…. Because of the changes made to the content width and sidebar width in post pages, the double columns for pages (http://valsministries.com/about/) and the front page parallax images (http://valsministries.com/) are now affected.

    Please, do you have a code to solve this or is their a quirk to code #6 to resolve the issue? See the links above to each case.

    Thank you for you kind help.

    Liked by 1 person

    Reply

      1. Thank you so much for replying so fast.
        After implement the code #6… to adjust the post content width and sidebar.
        It affect the pages…
        I want to restore the pages to it default settings but at the same time keep new content and sidebar width (implemented by code #6) on the singles posts and archives
        Thank you.

        Like

      2. Hi Frank
        ok… remove the code #6 you used before…
        now

        to change content width and sidebar width only for Single Post page…try this code

        .single-post .wrap {
        max-width: 1145px;
        padding-left: 3em;
        padding-right: 3em;
        }

        .single-post #primary {
        width: 70% !important;
        }
        .single-post .has-sidebar #secondary {
        width: 26% !important;
        }

        please let me know if it helps?

        Om

        Like

  54. Thank It worked … but I had to tweak it a little.
    I have bookmarked your site and have shared it on social media.

    The code you provided restored the pages to default (that’s what i wanted) and it also increase the content width correctly but did not affect the sidebar which caused the sidebar to be pushed down below the content as a footer. (the problem was solved by spacing the last two snippet and removing “.single-post” from the last snippet)

    I also added the media section you showed in the comments above; so that the site can remind responsive and appear great on mobile.

    See the code I finally used below.

    —

    /* implementing to change content and sidebar width */

    @media only screen and (min-width: 980px) and (max-width: 20000px) {

    .single-post .wrap {
    max-width: 1145px;
    padding-left: 3em;
    padding-right: 3em;
    }

    .single-post #primary {
    width: 70% !important;
    }

    .has-sidebar #secondary {
    width: 26% !important;
    }
    }

    Like

    Reply

  55. Hi,

    This is really a great tutorial that should be linked to WordPress Twenty Seventeen theme page with so many answers to a load of issues that people are desperately looking for in many other places and not always with an answer…

    Sorry, I’m just adding my own “burden” …

    1 : I would simply like to move the site logo to the right of the title. I read and applied your code to move the site title and the descrition for testing purpose, but not all of them can be moved ! Anyway, I don’t want to move all but just the logo !

    2: I can’t center the “Proudly powered” in the footer inspite of following your exaplanation! I did as explaine, changes the footer.php content with this :

    Copyright© 2017 – BMWMOAFC.FR

    I initially tried with “center” but it stays on the left !!!

    3: I couldn’t find how to remove the padding just under the page name just above the text section.
    You gave a code for a previous post but it works only for the hompage and doesn’t reduce the padding anyway when I apply it !

    4 : Same as above, how to manage the padding at the end of each page (not removing it but reducing it) ,

    Thanks so much if you can answer at leat a few of those questions and congratulations if you can find a solution to all of them !

    My BMW bikers friends will thank you warmly !

    Philippe

    Like

    Reply

    1. HI Philippe
      for your first issue ( moving only logo to right of title) try this code
      .site-branding-text {
      float: left;
      margin-right: 2%;
      }

      For your 2nd issue

      *** i checked and found you already solved it?

      For your 3rd issue.. To remove / reduce gap after or before title

      .entry-header {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      margin-bottom: 10px !important;
      }

      let me know if it helps?

      Om

      Like

      Reply

      1. Hi !

        First of all, thanks for your professionalism and your reactivity!

        I think many people could be interested by the answer as this is part of the recurring criticism that can be made to this nice theme !
        There’re many détails on the which it would be indispensable to take the hand !

        Advanced Twenty seventeen in many repect allows this knd of thing but not yet on all these finetuning !

        To get back to your answer, here’s the feedback :

        1 : problem solved, the logo switched to the right sucessfully !

        2 : No, this is not solved, unless the position is the expected one according to you !?
        This is not in the “real” middle of the page, but in the middle of the text section of the page, no ?
        To me we’re still at a third of the expected position, not half ?

        3 : Almost great again, it works, I managed to find the correct values for both the padding above the title (through another code provided on your blog) and under the page title !
        Perfect for this, but I said “almost” : the homepage doesn’t apply the value !!!??

        I suppose it’s managed by different values ?

        Furthermore, may I ask you a question : what does the “padding top” and “margin bottom” values correspond to in the code ?
        I tried to change the value but didn’t notice a change in the position of any object ?

        4: No idea yet about how to change the value of the bottom padding for the text section on the pages ?

        Thank you very much again for your help !

        Philippe

        Like

      2. HI Philippe
        thanks..

        the footer “Copyright© 2017 -BMWMOAFC.FR ” is showing centered in my end? so..i think u should not worry..but if u share me screenshot how it is looking in your end..then i can check properly..but..it is centered in my end

        regarding issue 3 (homepage title gap issue)

        .home article .wrap, .home article header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        }
        .home #content {
        padding-top: 0px !important;
        }

        Regarding issue 4:

        #content {
        padding-bottom: 0px !important;

        }
        #colophon {
        margin-top: 0px !important;
        }

        let me know if it helps
        *** padding and margin generally used to put gap or spaces

        Om

        Like

  56. Hello !

    Almost there !

    Issue N°3 solved !

    Issue N°4 Same thing as for issue N°3 initailly, it doesn’t apply to the homepage !

    Bad luck, this is the page where it’s the most noticeable just under the signature of the president ! 😉

    I think it’s gonna take a you a few second for the “finishing touch” !

    Already said that, but I’m really impressed by your reactivity, more especially a sunday !

    Philippe

    Liked by 1 person

    Reply

    1. Hi Philippe
      in our country Sunday is not holiday 🙂
      i am little bit free now that’s why able to help
      so for issue 4 in home page..would u mind to try this please?

      .home .wrap {
      padding-bottom: 0px !important;
      }
      .home #content {
      padding-bottom: 0px !important;
      }

      let me know if it helps
      Om

      Liked by 1 person

      Reply

  57. Hello OM,

    I’m really sorry for you, even though this is “cultural”, for us, westerners, men (and women) need to rest for all their hard work in the week so as to rest of course, but also enjoy life a minimum ! 😉

    i know that enthusiastic people don’t perceive it the same way, but you really deserve it !

    Anyway, let’s get back to our “finishing touch”, and the answer is… 10/10 you’re the best !

    Curiously the padding is not fully removed therefore, it seems we cannot tweak that much the values, but to me, the remaining padding is perfect, not too few nor too much in this case !

    Congratulations and long life to your blog I’ll undoubtedly keep looking at for any novelty or solved issue from other readers !

    Thanks very very very much

    Philippe

    Like

    Reply

      1. Heel,

        In which way could we improve the result !?

        Of course, i’m curious and enthusiastic, so I’m always interested in improving things!

        But I don’t want to take advantage of your time and kindness !

        Philippe

        Like

      2. Hi Philippe
        no problem…. you can try this code

        .entry-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        }
        it will reduce some more padding
        Om

        Like

  58. Hello,

    Sorry, but this code doesn’t reduce but on the contrary it increases the padding !

    Padding above page titles is the same according to what I see, but the one under is almost doubled !

    .entry-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    }

    There’s one line different from your original code, this one :

    margin-bottom: 10px !important;

    And it seems to make the difference !

    Philippe

    Like

    Reply

      1. Hello,

        Oh I had almost forgotten but I had another last question and a friend of mine member of the club for the which I asked all these questions told me a few minutes ago that the black color I applied this week-end to the footer was nice and the white letters of the address jump out but it’s a little too big and there’s too much black color !

        I was surprised when I applied your code that it comprised the widget address !!

        How comes that it’s included while we’re only expecting the black band where “Powered by WordPress” is wtritten to be black ?

        Can we modifiy your initial code so that only this band remains in black and not the widget or is there something else that prevents your code froim being properly applied ?

        Regards,

        Philippe

        Like

      3. Hello OM,

        Yes, indeed, this is what i currently have, but I thought that the footer corresponded to the narrow band where the copyright is positioned !

        Too bad ! 😦

        Is there a way to dissociate the band I would like to be in black and the address block which is a widget ?

        Have a nice day,

        Regards,

        Philippe

        Like

      4. HI Philippe
        so u want the footer widget section to be white background and text color to be black….

        and
        the copyright background to be black and text to be white.
        right?

        if yes..it can be done..but for this footer file need to be modified…i can do it..but.. for this u have to communicate me in my fiverr profile

        Om

        Like

      5. Hello,

        Yes this is exactly what I’m expecting! 😉

        Sorry, but what do you mean by “u have to communicate me in my fiverr profile” ??

        Regards,

        Philippe

        Like

  59. Hello,

    Ok, but just a question before !

    Will the modification be coded in the footer or the CSS ?

    In other words, will the modification have to be saved everytime WordPress is updated ?

    Second, if I change the theme, I guess it won’t impact the other themes ?

    Regards,

    Philippe

    Like

    Reply

    1. HI Philippe
      the change will be in footer.php file..and the changes will be done using child theme…so you dont need to worry about any sort of update

      and other theme is not related to this changes
      Om

      Like

      Reply

    1. HI Kerry
      share me the site url please
      and
      you have to install Simple CUstom CSS plugins if you are using your own domain and hosting

      if you are using wordpress.com free hosted site..then you have to purchase Custom Design plan from wordpress.com
      Om

      Like

      Reply

      1. Id like to but Im getting loads of unsolicited emails. I purchased the URL and its paid hosting with Godaddy.
        I installed your Custom CSS plug in just need the CSS code to reduce font size please.

        Like

  62. Hi Om,

    thanks so much for this helpful post and the comments. It already helped me a lot.

    Of course I’ve a question too … I’d like to move the featured images from the featured-image-header down to a position under the post headline. Is there a simple hack to do that?

    Best regards,
    Stefan

    Like

    Reply

      1. Hi Om,

        sure, it’s a pleasure! 🙂

        A good example might be the self-mixed post-category page http://rauchenistbloed.de/rauchen-schadet/raucherkrankheiten – I set the featured-image-header on display:none, and inserted the image “by hand” into the post-editor.
        But of course it would be great (and a gift for my laziness), if the featured image could take it’s position there automatically …

        Stefan

        Like

    1. Hi Stefan
      please try this code
      @media only screen and (min-width: 980px) and (max-width: 20000px) {
      .home .wp-custom-header img {
      min-height: 231px;
      max-height: 231px;
      }
      .home.custom-header-media {
      height: 301px !important;
      }
      }
      let me know if it works?

      Om

      Liked by 1 person

      Reply

      1. Hi, first of all: 1.000 Kudos to you for being so helpful. Thank you!
        Then, yes, it works – almost … 🙂
        The picture size is perfect now, thanks! But the large header still remains, now blank, with the image only on top … Hm, do you have a solution for this too?
        Best regards! Stefan

        Like

      2. Hi Stefan
        the code i shared didnt effect fully i found?
        mainly this one

        .home.custom-header-media {
        height: 301px !important;
        }

        this code seems didnt effect….so have u implemented my shared code properly?
        let me know
        Om

        Like

      3. Hi Om,

        yes I implemented it at the end of the style.css completely and without changes.
        The result is under http://rauchenistbloed.de …

        Btw. can I remove the @media restrictions without danger? I’d like to have a short header image in all media.

        But first, of course, it would be good to shorten the white frame too. 🙂
        Best,

        Stefan

        Like

      5. Hi Om, yes, I placed it in the style.css, but meanwhile I found the reason – it works with a blank after .home . Thank you! Stefan

        Like

  67. Thanks, you are awesome for creating this! Can you help me change the font color of my navigation? I used your code to put the navigation on the top but I just help on changing its color and hover color too? Thanks again for making this page!

    Like

    Reply

  68. *** To remove page title from twenty seventeen theme and remove gap
    .page #content {
    padding-top: 13px !important;
    }
    .page .entry-header {
    display: none !important;
    }

    Where does this code go? In the style.css file? If yes, does it go in section 13.5 for pages?

    Thanks in advance.

    Like

    Reply

  70. Hi Om,

    Your article is really useful. Thanks.

    On my website: http://madeleine-mouton.com/ all the links have a very thick underline.
    I wish to keep the underline, but I don’t want the thickness when hover. And maybe instead have a color change.
    Could you help me with code for that?

    Also, I am using the Accordion Shortcodes plugin to add content in my pages, but when you hover it acts like text and nothing shows you can click it. How could I change that?

    Thanks a million,

    Like

    Reply

    1. Hi Madeleine
      Regarding the border issue in links when hover try this code

      .entry-content a:hover, .entry-summary a:hover, .widget a:hover, .site-footer .widget-area a:hover, .posts-navigation a:hover, .widget_authors a strong:hover {
      border: none !important;
      -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1) !important;
      }

      Regarding your 2nd issue: would you mind to clarify me some more? sorry didn’t understand it..and share me the post/page url where you are using it

      Om

      Liked by 1 person

      Reply

      1. The code worked great! Thanks.

        I have a one page site (thanks to another article you wrote) so I can’t specify a page. I use the Accordion Shortcodes plugin in all my pages.

        It’s the gray titles to the right. They are shown as “closed” and when you click on them they “open” for you to read the hidden content. As you can see nothing indicates that you can click on these gray titles. The mouse doesn’t hover or anything. How could I change that? This is the plugin i’m using : https://wordpress.org/plugins/accordion-shortcodes/

        Thanks

        Like

      3. The cursor pointer works perfectly. You are my savior.
        One last thing, the white space in the footer between the widgets and copyright is huge, is there a way to reduce it ?

        Thanks again,

        Like

      4. HI Madeleine
        try this

        footer .widget {
        padding-bottom: 0px !important;
        }
        .site-footer .widget-area {
        padding-bottom: 0px !important;
        padding-top: 1em !important;
        }

        Om

        Like

  72. Thanks for your great help. My blog is exactly how I want it. However the menu won’t drop down on mobile. I deactivated the plugins, deleted the twenty-seventeen theme and reinstalled it, yet the problem persist. I am on child theme and I did edit my footer.php file to rename the footer note and also my index.php to make pages have full width. I added a few css codes to. All of these I did take off and the menu still wont drop down. Please help!

    Like

    Reply

  73. Hi Om,
    I hope you are fine 🙂
    I entered the code of the question 24, To move Navigation menu to the top. It works well.
    Just one question, when I scroll the homepage, I have a white line just below the homepage featured image. Can you tell me how to remove it?
    I also would like to have the menu on top on mobile devices, can you help me ? Thanks
    Johanna
    url : http://www.surlinstant.com

    Like

    Reply

    1. Hi Johanna
      to remove the white line try this code
      .home div#content {
      padding-top: 0px !important;
      }

      for mobile menu (please check your inner pages too after using my provided code)

      @media (min-width: 240px) and (max-width: 560px) {
      .navigation-top {
      position: fixed;
      top: 0px !important;
      width: 100% !important;
      z-index: 100000000;
      }
      .custom-header {
      margin-top: 14px;
      }
      }

      Om

      Like

      Reply

  74. I’d like to move the position of the social menu from default left to right.
    I’d also like to know how to write something so that it’d appear on the same line as the social menu. I have no idea where to begin.

    Like

    Reply

    1. Hi Fiona
      Regarding the social menu position..
      try this code

      .nc_socialPanelSide.fade {
      left: auto;
      right: 5px !important;
      }

      Regarding the 2nd issue..
      can u share me screenshot where you want to show the Text in social menu?

      Om

      Like

      Reply

      1. Hi thanks so much: I put the code above into the CSS Customize but nothing happened.
        This is the URL … social.whenyouliveinparadise.com

        I can’t attach screen grabs in the site it seems.

        I would like, alternatively to add a line of text after the icons – if I can’t get them to move – so on the same line. Saying Powered by Paradise and it in itself being a link to http://www.whenyouliveinparadise.com

        Thanks for your time.

        Like

      3. OH! Bazinga! It worked immediately ! Thanx .. oh if only to know these things!!

        So if I wanted to put text on the same line as the Icons (both before and/or after the icons) is there a magic snipped I could add here too ..

        Want to to say Powered by Paradise and it be a link to http://www.whenyouliveinparadise.com

        Like

      6. Hi Fiona
        so you want it here?
        social.whenyouliveinparadise.com
        at the footer…right?

        i mean..in twenty seventeen theme?

        let me know..
        can u contact me in my fiverr profile? i will need to check your dashboard….
        let me know…
        Om

        Like

      7. yes here —> social.whenyouliveinparadise.com at bottom. Text (and URL) to precede (or go after) the social menu.
        fiverr ? dash – no problem

        Like

  75. Hi Om ! First of all, many thanks for the great post ! I’ve used lots of your codes and they always work perfectly !!!
    Do you know a way to remove the effect from header image ? Its like a gray filter over the video/image ?

    Like

    Reply

    1. Thanks…try this code

      body:not(.no-header-image) .custom-header-image::before, .lodestar-front-page .custom-header-image::before {
      background: transparent !important;
      }

      let me know if it helps
      Om

      Like

      Reply

  76. Hi Om,
    Your post is great, thanks!
    Can I ask how to add a border to the footer and how I would do this please?

    Thanks

    Like

    Reply

    1. I’ve just thought of something else…is there a way to add a background image behind the first text area on the homepage? This would be directly below the menu.

      If you could offer any help that would be great.

      Thanks again

      Like

      Reply

      5. Hi Paula
        ok site is live now

        so.. you have managed to show background behind the text…
        what changes u need now?
        let me know

        *** dont worry if i am little late to reply..just keep the site live to let me check

        OM

        Like

      6. Hi Om,
        Can you tell me how to display that same background throughout the site? Also how to add a black top border on the footer?

        Thanks
        Paula

        Like

      8. Hi Om,

        That only worked for the Homepage, if I move to another it only displays the background in a panel.

        Any other suggestions? Thanks for your help so far.

        Like

      12. Hi Om, I notice that there is a white bar at the bottom of my page, is there a way to remove this. Is this due to having a background?

        Like

    2. Hi Om,

      Sorry to be annoying, I’ve encountered an issue with my menu background not displaying on my mobile. Could you help?

      Like

      Reply

      5. Hi Paula
        your mobile should have option to capture the screen..
        or if u have another mobile or camera.. take an image..upload it in ur media library and share me the link
        Om

        Like

      7. Hi Paula
        according to your screenshot you mean..the drop down background of your mobile menu is not showing the background..that is the issue..right?

        let me know please
        Om

        Like

  78. Thank you for your hacks. Is there a way to put our company banner (header image full width) at the top of the page above the header media. Have added css to move the menu navigation to the top above the header media now would like to add our full width company banner (jpg or png) above the menu navigation. Brand (logo, company name, etc), header menu navigation (pages) and then header media?. Thanks

    Like

    Reply

      1. Hi.

        Youve saved us so much work. Really appreciated. I need to do the same as RFQPRO and insert a banner at the top. I have also moved the menu to the top. Also what size should the banner be?

        Thanks

        Like

      3. Thanks Om

        Worked great on Our Staff and Contact page but made no differnce on the products page. Probably because im using eCommerce Product Catalog for WordPress plugin?

        Thanks

        Like

      4. Thanks
        would you mind to try this code please?

        @media (min-width: 760px) {
        body.archive:not(.home) .custom-header {
        margin-bottom: 0px !important;
        padding-top: 50px;
        }}

        let me know if it helps
        Om

        Like

      8. Hi Peter
        would you mind to try this code
        @media (min-width: 760px) {
        body.archive.tax-product_cat .custom-header {
        margin-bottom: -25px !important;
        padding-top: 25px;
        }}

        let me know if it helps
        Om

        Like

      10. Hi Peter
        try this code for Product page header issue

        .post-type-archive-product .custom-header {
        margin-bottom: -25px !important;
        padding-top: 25px !important;
        }
        let me know if it helps

        Om

        Like

      11. Hi OM

        That worked for the product page but not for the pages in the drop down list. Sorry if i didnt make myself clear about that.

        Pete

        Like

      14. Hi Peter
        for the 3 links you shared, try this code
        .archive.tax-product_cat .custom-header {
        margin-bottom: -25px !important;
        padding-top: 25px;
        }

        but i think if you were using the code below..it would apply to all of the pages

        .custom-header {
        margin-bottom: -25px !important;
        padding-top: 25px;
        }

        let me know please

        Om

        Like

    2. Sorry for the delay. its cemimaxaustralia.com

      The site title is ok where it is now so dont worry about that issue thanks. My issue now is that on the Our staff, Products and Contact us all show the site title too high and Id like that banner to be smaller. Can you help there? The site title on the home page is i where it is.

      Like

      Reply

      1. Hi
        thanks,
        for your inner pages

        @media (min-width: 760px) {
        body.page:not(.home) .custom-header {
        margin-bottom: 0px !important;
        padding-top: 50px;
        }

        }

        try this code
        let me know if it helps
        Om

        Like

  79. Hello, Do you know how to remove the link from the header logo? The logo will still show, but it will not be clickable and will not be a link. Thank you!

    Like

    Reply

  80. Hello again …
    is there a snippet of code to change the sidebar from defaulting to the left. I’d like it on the right (and slightly smaller) but the main thing of importance is to change the side.

    Like

    Reply

      3. No that is correct. As I just don’t want to include it as it’s on the wrong side. But you have all the details from last week to access the site. I will click it to make it show on the default .. but temporarily as I don’t want it on the left – I would like it on the right.

        Like

  82. Thanks for all those custom css modifications, they might come in handy. I have a simple “small business” site built on twenty eleven + child theme that needs to be updated. I’m new to Twenty seventeen but from trying it out it i kinda like it, it is more “business oriented” then earlier themes i think. So im about to move the 2011 to 2017 but i can not understand why 2017 seems to have only two footer widgets instead of the “normal” three footer widgets. They are also left-centered and leaves empty space to the right and does not look good when you view it on a pc-screen. Or is it just me not getting it it or have technical problems?

    Liked by 1 person

    Reply

  83. Hi Om,

    Thanks so much for the details and inquiries, they have really helped me a lot. Quick question in regards to the navigation bar. Once I increase the Twenty Seventeen content width (as answered on Question #6), the content doesn’t align with the pages listed on my navigation bar. If you take a look at my site, you will notice that the Blog, About sections are shifted over to the right, which is not aligning with the rest of my site. Do you have the proper CSS code I need to shift the elements more to the left to put them in alignment? Many thanks in advance!

    -Lawrence

    Liked by 1 person

    Reply

    1. And another item just popped up as I checked my iPhone! When I increase the content width, the posts look super smashed on my mobile device. Do you know what media queries I can use to ensure that it looks good on a mobile platform as well? Thanks!

      Like

      Reply

  84. Hey Om, thanks for helping out with the issues above. I have two additional questions:

    (a) When you made the post page full width as you did in Question 7, do you know of a way to instead make the width around 80%, but have everything centered? It seems to keep pushing my content over to the left instead.

    (b) Is there a way I can individually target images specifically within the post page and set their max widths to a certain pixel or % amount? Also, what exactly is the pixel maximum for a full width post in this theme?

    Thanks in advance for your help!

    Like

    Reply

    1. Hi Lawrence..
      thanks..sorry for the late reply
      as per your question a,
      would u mind to check this code please

      .single-post .wrap {
      max-width: 80% !important;
      text-align: center !important;
      }

      Question b,
      every single page u can target, but for this you need good knowledge about CSS, or need to take help someone like me 🙂

      Om

      Like

      Reply

  85. is it possible to move the top menu so that it is over the bottom part of the header image, with a transparent background?
    many thanks for all your good tips
    -jack

    Liked by 1 person

    Reply

  86. just answered my own question. i edit the site-branding.php file to insert the top menu php. then remove same from the header. of course when the theme updates all will be lost. don’t know if can put those php files in a child theme! but it looks real nice for now.

    Like

    Reply

  87. Hello, thank you for your guidance.

    I wanted to remove the headers from WordPress Twenty Seventeen, and using your recommended CSS code worked well:

    .page .entry-header {
    display: none;}

    However, using this code also removed all of the titles from the blog post entries under “Blog” when you scroll down from the Home page. I would like these blog titles to remain rather than disappear.

    Is there an easy way to fix this? Thank you.

    Like

    Reply

      1. Thank you for your quick reply. Unfortunately, adding that code did not change anything. The three blog entries that appear when you scroll down still don’t have their titles (they do have these titles when I just click on the “Blog” link. So it seems to have something to do with the scrolling function perhaps.

        Like

  88. Hi Om – I installed a mailchimp plugin. I want it to display with a sign-up field centred on the header image. (Currently, it’s in the sidebar down below as a link.)
    Also want to remove the “Post” title and have the post at full page width. Can you help?

    Like

    Reply

  89. Hello, what do I need to do so that the header image and size on the homepage shows up exactly the same on all the pages?

    Like

    Reply

      1. Hi there, Amazing site – I would also like to know the answer to Sherry’s question. There’s a lot of advice on the WordPress.org forums, but nothing gives me the ability to change the other pages (apart from my home page) to have the same heading. I’ve created a video that I uploaded, but can’t put this into the other pages of the site. I’d like it to be the same. Or alternatively – what would actually be better is to only have the menu at the top (which I’ve already done through your advice and then delete header on all the other pages apart from the home page. That way I can insert a revolution slider and have separate images (slides) on each page. Can you maybe assist? This is not for my own page, but for a friend of mine that needs this.

        Like

  90. How would I change the selected page in the menu to bold (or other color) in the dark theme? Thanks!

    Like

    Reply

      2. Hi
        please check this

        #menu-item-130 {
        background: red !important;
        }

        this code is applicable for Wedding menu

        is that something u r asking?
        let me know
        OM

        Like

      3. Actually, I went for the following:

        li.current-menu-item a {
        text-decoration:underline;
        }

        Still not 100% what I was looking for (e.g. not showing blog as selected when selecting a category) but close!

        Thanks!

        Like

  91. Hello! I am trying to figure how can I hide in a page a specific footer widget .
    Theme bring every time the 2 i have created but I would like hide one and show others.
    Thanks,

    Fabio

    Like

    Reply

  92. Hi Om,
    I was looking for your help on my menu, it has a background, on a tablet screen a white border displays. Can you tell me how to fix this please?

    Like

    Reply

    1. Hi Roberta
      please try this code to make your logo larger for mobile device only
      @media (min-width:240px) and (max-width:660px) {
      .custom-logo {
      max-width: 80% !important;
      max-height: 80% !important;
      }
      }

      let me know if it helps

      Om

      Like

      Reply

  96. Hello, I am trying to figure out how to increase the number of blog posts displayed on the blog section of my static page beyond just three (and also include the image in the excerpt too, if possible). My website is: clearancecastlellc.com. Thanks so much for your help!

    Liked by 1 person

    Reply

      1. Yes, that’s right…I’d love to be able to show more than 3 posts here but don’t know how to change that or add the associated graphic there (like it is done if you choose the show latest posts option instead of static page). Thanks for your help! 🙂

        Like

      3. Yes, I’ve done both, but the reading preferences don’t work when you set your main page for static page. It says in the Twenty Seventeen theme specs on WordPress that only 3 posts will be shown and I need to know how to increase that number:

        “You can also select your Blog Posts page, and the panel will display your three latest blog posts.” – https://codex.wordpress.org/Twenty_Seventeen

        Like

    1. HI Alejandro
      would you mind to share me your site URL please?
      also
      would you mind to clarify me the issue some more please? where you want to put the link in image?

      let me know
      OM

      Like

      Reply

      1. Hi, thank you. My site is not online yet. I have a home image, and want that image to be a link to a seccion of that same website.

        Like

      2. Hi Alejandro
        so you want the twenty seventeen big header image to be linked to a different url?

        let me know

        actually it would better for me if i could check your site live too
        OM

        Like

  98. How do I get the page content title to show up above the content and not to the left of it?

    It looks like the page has 3 columns when it should only have two including the sidebar…

    Like

    Reply

  103. Hi Om,
    I hope you are well. I’m finally finsihed developing my website but there is one thing I can’t figure out that I hope you can help me with. My website is: smakasnack.com (I have it still in maintenance mode but have deactivated the plugin so you can help me easier.
    My menu doesn’t seem to be responsive on iPad or mobile as it’s missing the drop down with arrows and the first category under each menu is not clickable.
    Thanks in advance Om.
    Best regards,
    Cecilia

    Like

    Reply

      1. Hi Om,
        No worries, I hope you had a nice time away!

        It’s still an issue unfortunately so I was hoping you could help me with the CSS code?
        The ipad version is almost the way I want both the mobile and ipad versions to look like. It shows the grey colour when hovering – but only on the categories that don’t have a drop-down menu and I would like all the categories in the menu to have the grey hover effect. It also shows the drop down menu for the categories that have it but only when you click far to the right – so if I can add an arrow there to indicate to the customer where to click to see the drop down menu.

        There are two other things that I haven’t find a solution to as to yet for my website;

        In my Woocommerce shop, I have a widget/sidebar – I would like the products listed there to be in another colour (green) when you are at the page for that product (tells you which product you are looking at). Is this possible with CSS?

        Also, the colour of the pre-written texts in the different boxes when filling out the billing details is black and I would like to change it to grey #767676. I have managed to change to grey when you fill out the details but I would like the pre-written text to be the same. Is this possible with CSS?

        Thanks, Om.
        Best regards,
        Cecilia

        Like

  104. Good day Om,
    Thanks for this great post!

    Wondering if there’s a way to have a logo in the navigation at all? On the left hand side that is.

    I’ve just set up the theme (http://2017.lbsafricaclub.org), moved the nav bar to the top and fixed it there with the following code:

    @media (min-width: 760px) {
    .navigation-top {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 70px;
    }
    }

    @media (min-width: 760px) {
    .custom-header {
    position: relative;
    padding-top: 70px;
    }
    }

    Any help would be truly appreciated!
    Best

    Matthias

    Like

    Reply

    1. Hi Matthias
      sorry for the late reply

      please try this code and let me know if it helps

      .menu-image-title-hide.menu-image-not-hovered {
      padding: 0px !important;
      }

      .menu-item a img {
      width: 56%;
      }

      OM

      Like

      Reply

      1. Hello Om,
        Not late at all! Thanks so much for your help, you’re a star!

        You don’t happen to know how to decrease the space between logo and the first link in the navigation by any chance? This is just a ‘nice to have’, don’t worry if not.

        Thanks again!

        Like

  106. Hello Om,

    I sent you a message this morning, but in the mean time I changed my real site, so here is the site you can see (popfashionworld).
    I have another question as well. Is it possible to change the colour of the item price ?
    Thanks a lot !
    I already found a lot of answers on your site.
    Kind regards, Maaike

    Like

    Reply

      1. Hi Om,
        When I just looked, the prices stayed black all the time. It probably only was in the test version of my site, I didn’t check again. I am so sorry !
        But I have another question regarding the same page (http://popfashionworld.nl/tops/truien/). The text below the pictures is all in caps, can I change that to normal text?
        Thank you,
        Maaike

        Like

      2. Hi Maikee
        to make the text of titles to be normal (not capitalize)
        try this code

        .woocommerce-loop-product__title {
        text-transform: none !important;
        }
        and to change the price color try this code

        .woocommerce-Price-amount.amount {
        color: red !important;
        }

        let me know if that helps

        Om

        Like

  107. Hello again Om,
    I see now my earlier question was not posted.
    I installed Simple Custom CSS in order the change the site-title font family, but it doesn’t work. I can change size, colour etc, but not the font. Do I have to install a fontfamily separately?
    I used this code (copied from this site):

    .site-title, .site-title a {
    color: white !important;
    font-family: helvetica, cursive; !important;
    font-size: 36px !important;
    }

    Thanks,
    Maaike

    Like

    Reply

  108. Hi Om,
    Thank you so much for all the codes – I’ve used most of them and they work perfectly.
    I have two questions I can’t find answers for and i’ve tried a lot of codes without success.

    1) I wish to have the post date & author info BELOW the post title not above and nothing seems to work.

    2) I can’t seem to be able to change the font size and color of tags and category at the end of each post.
    I’ve tried various coding combinations for both but no luck yet.

    Can you help?
    Thank you

    Like

    Reply

      2. Hi,
        try this code to change font size and color of tags and category at the end of each post
        .cat-tags-links a {
        font-size: 11px !important;
        color:red !important;
        }

        let me know if it helps
        Om

        Like

      3. Hi Om the code you gave me worked, thank you 🙂

        Now how would I get the post date & author info (in pink on the link I showed you) below the post title not above? I’ve tried a couple of things but can’t seem to get right.

        Also: one last thing; I’d like to display the number of comments per post on the homepage beside the title (a little like yours only next to the title°, how can I do that?

        Thank you so much for your help!

        Like

  109. Thanks for this post! So helpful! However Ive been trying some css customization on the header and im running out of wits and google results. Can you you help my non-responsive header image pls? On iphone, the site title looks too big and overlaps other contents. Can you pls check out https://thewanderwalkers.com? thank you

    Like

    Reply

      1. Hi Om, that’s because for the mean time I resorted to the theme’s default… But if you would look at the mobile version, the header is too tall, eating a lot of space in the home page. I did the code suggested here, https://wordpress.org/support/topic/mobile-header-image-doesnt-resizeunresponsive/ but as the mod mentioned, there would be a gray space below. Is it possible to make the header image smaller without having gray space below? 🙂 Thanks

        Like

      3. Hi OM, the site now shows the error because i added the code below. Hope you have a solution 😀 Thankkkksss

        @media screen and (max-width: 480px) {

        .has-header-image .custom-header-media img,
        .has-header-video .custom-header-media video,
        .has-header-video .custom-header-media iframe,
        .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
        height: auto;
        left: 0;
        max-width: 100%;
        min-height: 0;
        -o-object-fit: unset;
        object-fit: unset;
        position: relative;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        }
        }

        Like

      4. Hi JOnai
        please try this css code for your header image responsive image issue for twentyseventeen theme

        @media screen and (min-width:240px) and (max-width:560px) {

        .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {

        max-height: 168px !important;
        }
        .has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
        top: 0px !important;
        }

        }
        let me know if it works

        Om

        Like

      5. It’s amazing! Although when i resize my laptop browser a little smaller, the grey under the header image still appears but it disappears when the browser becomes very small. But if there’s no solution for that, then i give up. hehe thank you so much!

        Like

      7. Hello Om, i also don’t understand why last night I slept with my menu doing good on my laptop, but when i woke up this morning, the menu texts are below the menu bar already .. would you have an idea please? 😀

        Like

      9. This worked! So amazing! Not related to nav bar, but the left and right arrow icon (next and previous post) in single posts look to big on mobile and laptop…

        and the custom header in mobile is cropped so that the text are cut… If it’s not too much, can you look at this particular post to see this post in laptop and mobile please? Very grateful! Thank youuuuu
        https://thewanderwalkers.com/saigon-my-new-home/

        Like

      10. Hi JOnai
        sorry for the late response..i checked the arrow symbol issue.. are you using any plugins for that?
        let me know

        Also..for the header image issue, try this code
        @media screen and (min-width:240px) and (max-width:560px) {
        .postid-1332 .single-featured-image-header img {
        object-fit: fill !important;
        max-width: 100% !important;
        }
        }

        let me know if it helps
        Om

        Like

  110. Hi Om,
    Is it possible to have a different background image on each woocommerce page, i.e. a category page? I found a plugin which I thought could do it, but it only shows a background image on the sides, see the page. I would like an image directly behind the pictures as well. And if possible just 1 large picture.
    Thanks for your answer.
    Kind regards, Maaike

    Like

    Reply

      1. Hi Om,
        it’s actually just one background image (you see two sides of it now, outer left en right), but I want it in the section behind the pictures, where you now see a kind of marble.
        I have a different page fo each category and I would like a different background image for each category/category-page. Like e.g. snow behind the winterclothes and a swimming pool behind the bathing suits.
        Thanks,
        Maaike (or Maikee 😉 some of my collegues call me that as well 🙂 )

        Like

      2. 🙂 Hi Maaike
        sorry for the late response
        sorry didn’t understand the issue..can u share me the screenshot? also what is the site URL?
        let me know please
        OM

        Like

      3. Hi Om,

        The late response does not matter, don’t worry :-). I pasted the screenshot below. I would like a background image in the blue area (site-content-contain), but a different image on each category-page. Or a different background image in the header area (where the red flowers are now) of each category page. But that probably is the same problem… I tried with a plugin (Full Background Image Manager WordPress Plugin), but as you can see the image only shows on the sides. The sides do not have to show the image, only the blue area.

        Sorry for not replying through the website, but I could not paste the screenshot there.

        Kind regards, Maaike

        Op 21-8-2017 om 10:59 schreef All About Basic: > WordPress.com >

        Like

  111. Hi Om,

    In “Site Identity” Customizer, there is only 1 textbox for Tagline.

    I’d like to add another textbox for a second Tagline.

    How can I modify “Site Identity” Customizer to add a second textbox for Tagline?

    Thanks!

    Like

    Reply

  112. hello! this has been so immensely helpful! i implemented a few of your codes. however, i was left with an extra gray bar between the header and the menu. can’t figure out how to remove it. please help!

    an example page is: pekavanagh.com/books

    Like

    Reply

  113. hi , Om,
    i had installed a plugin Advanced Twenty Seventeen — WordPress Plugins and than deactivated it later . but after that my header and footer is missing and not working anymore

    Please Help me

    Like

    Reply

  114. Hello Om,

    I’m working on http://hoperoad.com.au and would appreciate help with the panel/feature image sizes on the home page.

    All my images are 1200 x 800 in size which is correct for the 2017 theme. They display correctly on the single pages, and they display correctly on tablet and small phone screens.

    But on computer screens, In the parallax sections on the home page the images are cropped top and bottom.

    I’d really appreciate your help.

    Thanks,

    Ingrid.

    Like

    Reply

  115. Hi
    Love this site! I am in the process of migrating our church website to WP and have used a number of tips already. However, the title fails to disappear from the BLOG page where the postings appear. Works fine on all the other pages. Do you know the reason why or the css to remove it.

    Like

    Reply

      1. Thanks. Seems that all I had to do was email you and then look again at the page using “inspect” on Chrome

        .page-title {
        display: none !important;
        }

        .page-header {
        display: none !important;
        }

        .site-content{
        padding-top: 60px !important;
        }

        seems to have done the trick and not broken any other pages.
        Regards
        Clive

        Like

  116. Hi! I am a beginner and have so far installed WordPress with Twenty Seventeen Theme and created child theme. I would like to change the location of the Site Title and Menu to function the way I found it on http://cerber.tech

    Also, please let me know where the suggested code should be placed in functions.php or style.css. Thank you.

    Like

    Reply

  117. Hello! This post is super helpful. Thank you for your work. May I ask how you can play with the font of all title contents. They’re a bit too thin for my taste.

    Like

    Reply

  118. Hi, im new to coding but want to make simple changes to font sizes and styles for my twenty seventeen theme. First of all i want my site title font to be different and bigger. Where axactly i put this code in order it to work? I already installed Simple CSS plugin for my site.

    .site-title, .site-title a {
    color: red !important;
    font-family: cursive !important;
    font-size: 23px !important;
    }

    Like

    Reply

  119. Hello. It is a good site. Thank you very much. I am Korean. I can not do what I want to do but ask questions. 1. I want to output the header image of the front page according to the width. When the window becomes smaller, I will do the image when it decreases to fit the width. 2. Sidebar is not displayed in page item. I would like to display the sidebar on the left in the page item. Please tell me how.

    Like

    Reply

  120. Hi, thanks for the tips here re: twenty seventeen theme, very useful! Is there a way to add a third widget into the footer? Thx, Lutz

    Like

    Reply

  121. Hello! I am trying to move the logo to above the site text, and to make it larger. Do you have code for that? I tried:

    @media only screen and (min-width: 768px) and (max-width: 10000px) {
    .site-branding {

    padding-right: 25em;
    padding-left: 25em;
    }
    }

    And that didn’t seem to do it. My site (under construction) is zaliasjewelry.com

    Thanks!

    Like

    Reply

  125. Hi Om, tks for your guide!
    sorry for the question, i know that you maybe had answer many times but…I can’t make my header image smaller… i put this code (like that, without change anything) in the Simple CSS Custom but it doesn’t work…

    .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: 66% !important;
    object-fit: fill !important;
    width: 100%;
    max-height: 100% !important;
    display: block !important;
    position: relative !important;
    }
    #wp-custom-header {
    height: 100% !important;
    }
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
    height: calc(71vh – 32px) !important;
    }

    Maybe there is something that i have to change…
    can you help me?

    🙂

    Like

    Reply

  127. Hi OM,

    I am now wondering if it would be possible to have the logo and menu at top, but on the same line, with the logo to the left, and the menu centered–and then perhaps a social media icon on the right. My website is at zaliasjewelry.com, but a good example of the layout I am aiming for is at http://www.squarespace.com/templates/online-stores, choosing a preview of the “Hyde” layout.

    Thoughts? Thank you!

    Like

    Reply

  128. Another thing I am wondering is how to just get rid of every bit of the header, and have the very top of the site be my static first page.

    Like

    Reply

  129. I did not see if my question was addressed in this forum so: I am using the 2017 Theme and for the life of me I cannot figure out a way to have my business address, phone number and email to show above the home page image. All I have is the homepage image and then below that the tag line for the site and then below that the menu. Did I miss something? I am totally new at this so please keep the technical language to a way a lay person could understand.

    Like

    Reply

      1. Thank you for your response. Please see attached screen shot.

        What I have been able to determine is that this theme does not seem to allow adding anything along the top as far as address, phone, email etc. in one line at the top, or just under the image, or just above or below the menu line. I have not been able to figure out how to enter it other than at the footer. I would love it if I could.

        Any advice would be greatly appreciated.

        Sincerely,

        Peter

        Virus-free. http://www.avast.com

        Peter Burstyn

        Burstyn Consulting Group

        Phone: (310) 926-8010

        Fax: (888) 557-0068

        http://www.burstynconsulting.com

        ***** PLEASE NOTE ***** This E-Mail/telefax message and any documents accompanying this transmission may contain privileged and/or confidential information and is intended solely for the addressee(s) named above. If you are not the intended addressee/recipient, you are hereby notified that any use of, disclosure, copying, distribution, or reliance on the contents of this E-Mail/telefax information is strictly prohibited and may result in legal action against you. Please reply to the sender advising of the error in transmission and immediately delete/destroy the message and any accompanying documents. Thank you.*****

        On Thu, Nov 16, 2017 at 7:36 PM, All About Basic wrote:

        > allaboutbasic commented: “Hi can you share me screenshot image where you > want to show the business address,phone number etc? also, which plan of > wordpress.com you are using? please let me know Om” >

        Like

      2. Hi Peter
        u r using wordpress.com right?

        if yes..to add the details of phone mails etc ..u will need business plan

        and using child theme u can add the details in any theme (not sure about the premium ones)

        Om

        Like

    1. Hi CHristian
      sorry for the late response
      to make your site non responsive, there is meta tag for that…try this code 

      <meta name="viewport" content="width=1024">

      you have to put it in your header.php just before

      Om

      Like

      Reply

    2. Hi Tiffany
      sorry for the late response
      to make your site non responsive, there is meta tag for that…try this code 

      <meta name="viewport" content="width=1024">

      you have to put it in your header.php just before

      Om

      Like

      Reply

      1. Hi Om–thank you! The underline hover worked great. There’s still a black underline beneath the image, though. Do you know how to remove that?

        As for eliminating responsiveness, I think we’ve figured out how to not worry about that.

        Like

      3. Hi Om–sorry about the delay! I didn’t have notifications on, apparently. You don’t see the black underline of the Instagram logo? It’s subtle, but I can see it on a few different browsers. Any luck?

        Like

      5. Sure! Here’s a shot of one of the pages zoomed in:

        Also, oddly enough, you can see the same kind of underlining on the media library-generated attachment pages (e.g., here), which may be a hint as to what is going on?

        Thanks, Om!

        Like

      6. Hi Tiffany
        sorry for the late

        your link of screenshot is not showing in my end

        but.. you can check this code

        .site-info .image-link {
        box-shadow: inherit !important;
        }

        let me know if it works
        Om

        Like

  134. Hi OM, Great site with lot’s of solutions, but I couldn’t find one for how to center the navigation menu on the top. website: goudopzilver.nl Hope you can help 🙂

    Like

    Reply

  135. When I combined the following codes together in the child theme css, I have the primary displayed in 70% rather than 100% in mobile screens:

    .has-sidebar .wrap {
    max-width: 1145px;
    padding-left: 3em;
    padding-right: 3em;
    }

    .has-sidebar #primary {
    width: 70% !important;
    }

    .has-sidebar #secondary {
    width: 26% !important;
    }

    @media only screen and (min-width: 240px) and (max-width: 580px) {
    #primary {
    width: 100% !important;
    }
    .has-sidebar #secondary {
    width: 100% !important;
    }
    }

    What should I do?

    Like

    Reply

      3. What I need is to expand the primary width to 70% for the desktop viewing but the mobile viewing stays 100%. The problem was, when I used the above combination, the desktop viewing works OK (primary width got bigger while the sidebar narrower), but mobile primary width became 70% too. So it looks not right on mobile phones.

        Like

      6. NO, the problem came back! Check it with your cell phone and you will see what I mean. My guess is this… the cache generated is static HTML for desktop version, so it looks strange on mobile phones. Please help solve this problem as it is a working site. What should I do now to make the mobile cache separate from the desktop cache?

        Like

      9. Hi Aubrey
        thanks and sorry for the late reply
        i checked your create.solar site in my mobile and found the site is looking good?
        sidebar is showing full width in mobile in my end
        Om

        Like

      13. What I want is to expand the primary width to 70% and reduce the sidebar width to 30% for the desktop viewing but the mobile viewing stays 100% for the primary and sidebar.

        Like

      14. Hi Aubrey
        sorry for the late response,
        please try this code

        @media (min-width: 980px) and (max-width: 1199000000px) {

        .has-sidebar:not(.error404) #primary {
        float: left;
        width: 70%;
        margin-right: 4%;
        }

        .has-sidebar #secondary {
        float: right;
        padding-top: 0;
        width: 26%;
        }
        }

        let me know if it helps

        Om

        Like

  139. Hi there, great site, great tutorial, Big Thanks you

    I have a question, just launched my website on twentyseventeen, however I would to disable the text hovering over image. Basically I would like the desktop version to look like the ipad version, all images being fixed positioned and not move in the background when scrolling over text. How do I do that? I have been looking over for a few hours now but no luck, thanks

    Like

    Reply

  140. Sorry if I was not clear enough. Actually when you scroll down, the images stey fix at their position in the background and the text section goes up. I like everything (text and images) to gor up when I scroll down. Is there a feature to set that?

    Like

    Reply

  141. Thanks a lot for such an interesting blog. In my 2017 the main menu appears at the bottom of the screen, and when I try to display a menu option, it unfolds downwards and can not be seen. How could I do that when the menu is at the bottom of the screen, it could display the options going up?

    Like

    Reply

  142. Thanks for answering so quickly, but, I’m sorry, my website is now in maintenance mode.
    The url is casaldalella.cat. I hope it will be ready in a few days. I’ll tell you when this is ready again

    Like

    Reply

  145. Could you help me? I am trying to add a widget with a small contact form to the header.

    I am trying to use the .site-branding-text section since the section already exists.

    I have already created a child theme in order to change the footer. I copied code online and really don’t understand everything that I did, but it works.

    My question is, how do I tell the theme to use the shortcode pointing to the contact form within the site-branding-text section? Thanks you for your help!!!

    Like

    Reply

  146. Om, I should also mention that I have added this custom CSS already:

    /* add Quick message to header */
    .site-branding img.custom-logo {float:left;}
    .site-branding-text {
    visibility: visible;
    border: thick orange solid;
    float: right;
    max-width: 40%;
    padding-left: 60px;
    padding-bottom: 60px;
    }

    I will have to remove the border and padding once I get the form to show up, but I just have it there as a filler to be able to see where it will be on the header.

    Like

    Reply

    1. HI
      so you want to show Contact Form to the right side of the Logo?
      if yes…what fields u want to show in that contact form?
      can u share me any mockup how u want it to be looked?
      please let me know
      Om

      Like

      Reply

  151. I don’t need you to code it for me … I just need to understand how to reference a shortcode. There is a site-branding.php file within the theme … and I know some php … I just don’t know how to make it pick up the shortcode for the form.

    Liked by 1 person

    Reply

  152. hi Om and people. any solid solution to have responsive header image on homepage and internal pages? i try various codes, but all of them not works well.
    i try the code bellow, but not resolves:

    .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe,
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: auto;
    left: 0;
    max-width: 100%;
    min-height: 0;
    -o-object-fit: unset;
    object-fit: unset;
    position: relative;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    }
    anyone have a solid solution?
    tks, marcelo

    Like

    Reply

  154. Hi! First I´d like to congratulate you for the professional work you´re doing here on helping people so much.
    I am trying to enlarge the logo of my blog, but only for PCs – the size for mobiles looks great; and align it to the top-center on both.
    My blog is: juventudeperigosa.com.
    Thank you so much!

    Like

    Reply

  155. Hi I am using the latest WP version and 2017 theme. Can i know how to not display the menu for just one page (page-id =1104)? Any help would be appreciated.

    Like

    Reply

    1. Try this code (not to show menu in specific page)

      .page-id-1104 .navigation-top {
      display: none;
      }
      .page-id-1104 .custom-header {
      margin-bottom: 0px !important;
      }

      .page-id-1104 .site-content-contain {
      padding-top: 15px;
      }

      Om

      Like

      Reply

      1. Hi Om
        The code for not displaying the menu had some issues. It blocked the menu for that page. But somehow all other pages and my post also did not display the menu. The page id (1104) is correct. See below.

        -com/wp-admin/post.php?post=1104&action=edit.

        So i am wondering how it impacted all pages. Hope you can offer suggestions to fix it.

        Btw i did removed the below code. Note when the code was there, it still did not display the menu for all other pages.
        }
        .page-id-1104 .custom-header {
        margin-bottom: 0px !important;
        }

        .page-id-1104 .site-content-contain {
        padding-top: 15px;
        }

        Removed the custom header code as I dont display the header for the page any more.
        Removed the content padding as i previously coded it looking at your reference.

        Thanks again OM.

        Like

      3. Hi Om
        Had a rethink on what i wanted to do. I realized the easiest way not to display the menu in my page was to remove the page to the menu in the appearance section. Hence my issue is solved

        Like

  156. Hi OM.
    My objective is to not display the header in a particular page. No issue if the header appears on the homepage or posts.

    I need some help to either
    1) remove the header from appearing in one of my pages. The codes i tried didn’t work at all.
    2) remove the header shadows when I removed the header image in customizing header media option since i could not get option 1 to work.

    Would be grateful if the solution is just some code that i can copy and paste in the additional CSS option. Btw i am using the latest WP version and 2017 theme.

    Thanks

    Like

    Reply

  157. Hi Om,

    Code 6 for the width of the columns looks waaaaay better on desktop but I tried it on my phone and it messes up the width. Is there a way to get the best of both worlds? Thanks in advance.
    Gavin

    Like

    Reply

  158. Hi Om,
    My question could be a little tricky, but, in twenty seventeen theme, I liked the front page’s panel-parallax slide, and want to be able to use it in one of my sub-pages too in the site. I did manage to create a child theme, and did find out that the sub pages are shown with template-parts/page/content-page.php, and i know the id of the page which i want to show with panels, but what i couldn’t find out is how does the front page works… Therefore, i couldn’t apply front page’s sliding template to this particular one page… Is there a way you could point me out the solution?? Thanks a lot in advance,
    Evy.

    Like

    Reply

  159. Hi there you gave me the code a while back to right align the social media icons .. I was wondering if you could give me the code for centring them as I’m no longer displaying the “powered by wordpress” I have this code in the CSS area

    .social-navigation {
    float: right !important;
    }

    .site-info {display: none;}

    URL is whenyouliveinparadise.com

    Like

    Reply

      4. To change Navigation menu bar color

        .navigation-top {
        background: darkred !important;
        }

        and to remove the arrow

        a.menu-scroll-down {
        display: none !important;
        }

        please let me know if it helps

        Om

        Like

  162. Hi, Om.
    I tried the idea outlined in
    Question 6: How to increase the content section width
    All pages of the site were formed well. But on the main page I was not able to build pictures on the width of the screen. In addition, I would like to put these pictures in the frame entirely. Maybe you could give me advice?
    Link to my website: adminkov.bcr.by
    e-mail: klenitskiy.oleg@mail.ru

    Like

    Reply

      1. Thank you, I coped myself. Thank you for your participation. I am interested in your opinion, criticizing the design of my site, based on the theme of Twenty Seventeen.
        Link to my website: adminkov.bcr.by
        e-mail: klenitskiy.oleg@mail.ru

        Like

  163. Hi Om, when I apply Question 6 : How to increase Twenty seventeen content section width. the sliders (slider rev) I use are also limited in width instead of being full-screen. What can I do about it?

    Thanks, Christoph

    Like

    Reply

      2. HI Christoph
        i checked your site
        and found the slider revolution is showing full width? and it is not limited in width?
        would you mind to clarify me the issue some more please?
        Om

        Like

  164. Hi Om!
    In the Pages, I’m trying to reduce the title space and increase the post space, without success. Defaultly, an “About” page looks like a big white space on the left and all the content on the right. Is it possible, to say, to *invert* page content and page title? Anyway, how to alter the proportion (i.e. 10% title and 90% content, instead of 50 and 50 like I guess it’s currently)?
    Thanks!! Great work!

    Like

    Reply

      2. P.S. Remembering the mobile version, that’s most used. In fact, I tried to do myself – reading your advices, but each time I move something, the mobile version is no more well readable.

        For example, I tried to change the percentage post/sidebar in the homepage, finding that it works well on the Pc, but the mobile views resulted compromised. So I left all default. Here again, if you have a good advice would be very appreciated! Thanks!
        Luciano

        Like

      3. Hi Luciano
        would you mind to try these code first please?
        let me know if it helps

        @media screen and (min-width: 48em){
        body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
        float: none !important;
        width: 100% !important;
        }
        }

        @media screen and (min-width: 48em){
        .blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
        float: none !important;
        width: 100% !important;
        }
        }

        Om

        Liked by 1 person

  165. Thank you very much Om! It works perfectly on Pc and mobile as well. Now Pages are more readable, indeed!
    About Posts, do you have an advice to change the percentage (proportion) between content and sidebar without compromising the mobile viewability?
    For example, http://comlab.clusterdigitali.it/2018/welcome-class-benvenuti/ – here there’s this proportion that I think is 60% post, 40% sidebar (or so). I think a more readable view could be 70 and 30, or with other relative metrics too.
    Thank you again!

    Like

    Reply

    1. Hi Luciano
      Try this code please

      @media screen and (min-width: 48em){
      .has-sidebar:not(.error404) #primary {
      width: 70% !important;
      }}

      @media screen and (min-width: 48em){
      .has-sidebar #secondary {
      width: 28% !important;
      }}

      let me know if it helps

      Om

      Like

      Reply

  166. Hi OM..
    Is it possible to change the color of background per page?
    ex: about page color blue
    contact page color red
    blog page color yellow

    thanks..

    Like

    Reply

      1. Hi OM..
        Still working on localhost.. 😦
        how about our navigation menu bar text it is possible to change the color of the font and hover?

        thanks..

        Like

  167. Hi, how do I make the post title into a link for that page (within the single post page, not category page)? i’ve looked everywhere but cannot find the answer. Thanks!

    Like

    Reply

  168. Hello, first I wanted to say thank you for this post. I recently launched my first website (onceuponatinyhouse.com) using the 2017 theme with no experience and used many of your codes listed here to make the layout look the way I wanted.

    One thing I’m still wondering is if there is an easy way to center the logo in the main header area? I’m planning on removing the large image completely and want just a logo at the very top and center of the homepage.
    Is there also a way to make the logo appear larger so it is easier to see on all devices? It seems to be set fairly small by default.

    Like

    Reply

      1. Yes, I haven’t inserted the logo yet. I have a logo I would like
        to place in the top center of the page, but haven’t inserted it on the site yet because it doesn’t look very good on top of the current header image. That’s why I think I’d like to simplify the look of the page by removing the big header image and only having a logo at the top, but would like it centered at the top of the home page, if there is a simple code to fix that? And also to make the logo appear a bit larger than it currently does by default.

        Like

  169. Hello!
    I would like to put an image as a link on the far right of the header (same height to logo)
    any ideas?
    (I think it will be responsive by default in twenty seventeen, right?)

    Like

    Reply

      2. Hi
        currently you used an wordpress logo image.
        you want same size image to the right?
        if yes..can u share me screenshot in which location you want to show it?
        also it will need to modify theme file
        Om

        Like

  171. hello and good evening dear om

    again me – martin. I have some issues in setting up a wp-site on the server.
    I get back the “error establishing a db connection”

    all the trials failed – i tried the following:

    https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-error-establishing-a-database-connection-in-wordpress/

    Often you will notice this Error establishing database connection when your site gets swarmed with a lot of traffic. Basically, your host server just cannot handle the load (specially when you are on shared hosting). Your site will get really slow and for some users even output the error. So the best thing you should do is get on the phone or livechat with your hosting provider and ask them if your MySQL server is responsive. For those users who want to test if MySQL server is running yourself, you can do a few things. Test other sites on the same server to see if they are having the issue. If they are also getting the same error, then most definitely there is something wrong with your MySQL server. If you do not have any other site on this same hosting account simply go to your cPanel and try to access phpMyAdmin and connect the database. If you can connect, then we need to verify if your database user has sufficient permission. Create a new file called testconnection.php and paste the following code in it:

    i added the following code:

    Make sure to replace the username and password. If the script connected successfully, then it means that your user has sufficient permission, and there is something else that is wrong. Go back to your wp-config file to make sure that everything there is correct (re-scan for typos).

    well see what i get back here:

    Warning: mysqli_connect(): (HY000/2002): No such file or directory in /sites/www.mysite.de/testconnection.php on line 2
    Warning: mysqli_error() expects exactly 1 parameter, 0 given in /sites/www.mysite.de/testconnection.php on line 4
    Could not connect:

    well – do you have any idea what i can test – and do
    well i have to muse _ what goes on here.. something goes wrong…

    i will digg deeper – and come back again and report all the findings.

    love to hear from you

    Like

    Reply

  172. Dear Om, thank you for the tips and tricks for customizing the seventeen theme. I am new to wordpress and your post is really helpful. I have created a site with the seventeen theme and I have a static homepage and a blog page to display the latest posts. The featured image of the blog page disappears however when I make it the posts page. It displays fine when I choose a different page as the posts page, then that page does not show the featured image. Do you know a way to display the featured image on the posts page?
    Thanks in advance for any tips.
    If you like to take look, here is the url of the site: http://dg.brightmoon.org/
    Warm whishes,
    Anna

    Like

    Reply

  173. HELLO, OM!

    It’s been a while.

    All of the suggestions and code you gave me in the past is still working fine.

    I want my navigation menu to appear at the top of each post and page but fade away with scrolling.

    I already have this code:

    .single #masthead {
    display: none !important;
    }

    What should I do?

    Best,

    NEAL

    Like

    Reply

  174. Hi, Om!

    No problem.

    I have a nav-menu bar on the home page but I think I’d like to have it as a sticky at the top of every archive post and page. Is there code to stick it there?

    Best,

    Neal

    Like

    Reply

    1. Hi Neal
      at first check this

      .navigation-top {
      background-color: #dd8500;
      position: fixed;
      top: 0px !important;
      bottom: auto !important;
      }

      let me know what you get
      *** it is applicable for homepage and any other page where you are showing the menu

      Om

      Like

      Reply

      1. OM

        Thanks bt that did not work.

        Perhaps I had better explain: On homepage, I have the nav-menu bar set below the Featured image. That’s where I want it to stay on homepage. When I scroll down the page, the bar moves up with the page and can’t be seen until I scroll back. That’s the way I want it to function.

        On archive posts and pages:
        • I want it at the top of the page.
        • I want it to move up the page when I scroll and be out of sight of the reader.
        • I want it to be there at the top of the page when I scroll back.

        Does this make sense?

        NEAL

        PS: I also have an issue that will probably require you to visit my site as an administrator. Can I still engage your services via Fiver?

        Like

  176. Suddenly (perhaps after one update?) the title background is green, and I cannot change anything with colours in Advanced Twenty Seventeen -plugin. Before it has been everywhere the same background as the site-branding…
    With CSS I only can change background of title and subtilte, but not more:
    I tried:
    .site-title, .site-description a {
    background-color: red
    }
    .site-description, .site-description a {
    background-color: red
    }
    But it’s not what I expected… home-page: http://www.eucharistinerinnen.de
    Do you have ideas, what happened and how to repare it?
    Thanks a lot!

    Like

    Reply

      1. perfect! I just used another color 🙂
        But the gaps before and after the menu are still green… Don’t have any idea how to change this.

        Like

  177. Hi!
    I am sorry if I will make a dumb question, but… how can I delete the link to the administrator login on the Meta (it is located at the sidebar) ?

    Like

    Reply

      1. Hi again!
        I decided to delete the entire widget (=
        Thank you for your help!
        By the way, I liked your site, we find very good information here, congratulations!

        Alexandre.

        Like

  178. Hi ,
    Thanks for your wonderful blog.

    I want to remove left and right margin on pages/posts, so that it get more space.

    Can you help me with this.

    Thanks

    Like

    Reply

      3. Thanks for the code but I don’t want to increase the font, I want the text to touch the border of the screen and to remove the white space I show you in this image

        2020-01-28_1749

        Like

  181. Hi, great tips, but I wonder if you can help with my problem with the 2017 theme. The featured images on pages are all responsive and shrink in size on smaller viewing devices, but the hero image remains the same size and instead the display just zooms in on one part of it. Can the hero image be made to be responsive?

    Thanks In Advance
    Alex

    Like

    Reply

  182. hi, I’m newbie for coding…
    thanks for your tips.
    I managed to moved the menu to top.
    how about if i want to show the logo at front of the menu, can teach how to do it?
    hope to hear from u soon. Thanks!

    Like

    Reply

      3. <?php
        /**
        * The header for our theme
        *
        * This is the template that displays all of the section and everything up until
        *
        * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
        *
        * @package WordPress
        * @subpackage Twenty_Seventeen
        * @since Twenty Seventeen 1.0
        * @version 1.0
        */

        ?>
        <html class=”no-js no-svg”>

        <meta charset="”>

        <body >


        <?php

        /*
        * If a regular post or page, and not the front page, show the featured image.
        * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
        */
        if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
        echo '’;
        echo get_the_post_thumbnail( get_queried_object_id(), ‘twentyseventeen-featured-image’ );
        echo ‘‘;
        endif;
        ?>

        Like

  186. Hi OM,
    I I hope you are doing fine.
    I have a little issue with a page I created with Twenty Seventeen, The top pictures seems to be to big. Selecting menu like “Essen” jumps to the right section but somehow a part of the top picture stays above the menu. I am sure the mistake I did is in the CSS part, Ciould you pls take a look into sennhuette1028.ch and give me a hint?

    Thank you in advance!
    Toby

    Like

    Reply

      1. Hello Om,

        Thank you so much for answering me.

        Where do I ad the suggested entry?

        Following my CSS used:
        background: white;
        }
        .twentyseventeen-front-page .custom-header-media,
        .home.blog .custom-header-media{
        max-width: 100%;
        width: 100%;
        position: relative;
        }
        .twentyseventeen-front-page.has-header-image .custom-header-media img,
        .home.blog.has-header-image .custom-header-media img
        {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%;
        min-height: 0;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        }
        .twentyseventeen-front-page.has-header-image .custom-header-media,
        .home.blog.has-header-image .custom-header-media,
        .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
        .admin-bar.home.blog.has-header-image .custom-header-media{
        height: 0;
        padding-bottom: 60%;
        }
        @media (max-width: 782px) {
        .twentyseventeen-front-page.has-header-image .custom-header-media,
        .home.blog.has-header-image .custom-header-media,
        .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
        .admin-bar.home.blog.has-header-image .custom-header-media {
        padding-bottom: 52%;
        }
        }
        @media (max-width: 480px) {
        .twentyseventeen-front-page.has-header-image .custom-header-media,
        .home.blog.has-header-image .custom-header-media,
        .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
           .admin-bar.home.blog.has-header-image .custom-header-media{
               padding-bottom: 48%;
        }
        }
        .has-header-image.twentyseventeen-front-page .custom-header,
        .has-header-image.home.blog .custom-header{
        display: block;
        height: auto;
        }
        .has-header-image.twentyseventeen-front-page .site-branding,
        .has-header-image.home.blog .site-branding{
        position: absolute;
        top: 0;
        }

        Thank you again for your support!
        Enjoy, Toby

        Like

      3. Hello Om,

        Thank you for your anwer. I work with the code posted above in my additional CSS. Somehow the is not working properly, I tried to add your code but it does not make a change. Selecting either “menu” alwalys shows the lower part of the custom-header-media.

        Maybe you have another idea? Thanks again.

        Best, Toby

        Like

      1. Hi Om,

        Yes I did and took it of again. Now your provided code is active. Check sennhuette1028.ch. Hope you see something. Thank you. Toby

        Like

      5. For mobile for inner pages

        @media (min-width: 320px) and (max-width: 767px) {
        .page .custom-header img {
        position: relative !important;
        }}

        @media (min-width: 669px) and (max-width: 767px) {
        .page .custom-header {
        height: 236px;
        }
        }
        @media (min-width: 501px) and (max-width: 668px) {
        .page .custom-header {
        height: 200px;
        }
        }
        @media (min-width: 320px) and (max-width: 500px) {
        .page .custom-header {
        height: 163px;
        }
        }

        Like

      6. For homepage mobile

        @media (min-width: 320px) and (max-width: 767px) {
        .home .custom-header img {
        position: relative !important;
        }
        .home .custom-header-media {
        padding-bottom: 0px !IMPORTANT;
        height: 100% !IMPORTANT;
        }
        }

        @media (min-width: 669px) and (max-width: 767px) {
        .home .custom-header {
        height: 236px !IMPORTANT;
        }
        }
        @media (min-width: 501px) and (max-width: 668px) {
        .home .custom-header {
        height: 200px !IMPORTANT;
        }
        }
        @media (min-width: 320px) and (max-width: 500px) {
        .home .custom-header {
        height: 163px !IMPORTANT;
        }
        }

        Like

      7. Hi Om,
        You made my day 🙂
        I copy pasted your code and adapted the hights because my goal is not to show the header-image besides the landing page. It seems to work on on the page and mobile!

        Thank you so much for your super support.

        Enjoy, Toby

        PS: find following my actual code:

        @media (min-width: 768px) {
        .home .custom-header-media {
        padding-bottom: 59% !important;
        }}

        @media (min-width: 1024px) {
        .page .custom-header img {
        position: relative !IMPORTANT;
        }
        .custom-header {
        height: 0px;
        }}

        @media (min-width: 320px) and (max-width: 767px) {
        .page .custom-header img {
        position: relative !important;
        }}
        @media (min-width: 669px) and (max-width: 767px) {
        .page .custom-header {
        height: 0px;
        }
        }
        @media (min-width: 501px) and (max-width: 668px) {
        .page .custom-header {
        height: 0px;
        }
        }
        @media (min-width: 320px) and (max-width: 500px) {
        .page .custom-header {
        height: 0px;
        }
        }

        Like

  188. I’m having trouble with my header image – the bottom of it keeps getting cut off even though I’m using the correct pixel size it indicated.
    Can you please help me solve this?
    Thank you.

    Like

    Reply

      1. It’s all black with the image of a person holding a lantern to the right. His feet and lower half keep getting cut off.

        Like

      3. What am I supposed to do with that code? Sorry, I’m very new to this. Where do I put it and how do I use it?

        Like

      4. Ok
        Just go to Appearance > Customize > Additional Css
        put the code there and publish

        ** please share me your site url as i am replying you from dashboard..so everytime you put query i have to search your site address

        Like

  189. Hello Om.

    Hope you are doing great.
    I tried to enable a link on my top-menu integraded logo (link to landing page), I would like to do this over the additional css section. Could you please help me out?

    As well the top menu integraded logo is not shown on mobile devices. I belive of missing css.

    Thanks a lot for your support.
    Best, Toby

    Like

    Reply

      2. Ho Om,
        Of course. Sorry for not being very clear with my issue.

        I would like to set up a link on the logo Dock3 (top menu) to my landig page creative space. I added the logo in the top menu with a code in “Additional CSS” as a background image. Do you know if this is possilbe?

        Thank you!
        Toby

        Like

      6. Hi Om,
        ok, thanks – do I create a new menu item with the theme customizer? How do I put a class name there?

        Actual I am using this code to place the logo in the top menu (the url is as well shown):
        @media screen and (min-width: 48em) {
        #site-navigation:before {
        content: “”;
        background-image: url(https://dock3.ch/wp-content/gallery/Logo/DOCK3_Logo.jpg);
        background-size: 87%;
        background-repeat: no-repeat;
        width: 120px;
        height: 34px;
        display: inline-block;
        float: left;
        }
        }
        I hope you can help. Thanks a lot!
        Best, Toby

        Like

      8. Hi Om,

        The menu setting were hidden. Now I found the settings thanks to your image.
        I made the menu entry as suggested. What do I need to do now to show instead of Logo the logo image?

        Thank you much for your great support.

        Best, Toby

        Like

  190. I’m pretty sure I applied the CSS code – I went into Theme Customize and put it under Additional CSS and hit publish.

    Like

    Reply

      1. I’m sorry, but I don’t know what cache plugins are or how to figure out of there is any going on or how to clear it. And I would love to send you a screenshot but how do I do that? I don’t see an option to send a screenshot in the reply box.

        Like

  194. Hi Om,

    Hope you are doing fine!

    Try to bring my logo up to the top of the page followed by the top menu and landing page. I am working with your code of Question 24. Could you pls help me out on this. You can find the page on https://rosannatrafelet.ch

    Actual code used in additional CSS is:
    .navigation-top {

    position: absolute;
    top: 80px;
    width: 100%;
    height: 20px;
    padding-top: 0px;
    }

    @media (min-width: 760px) {
    .custom-header {

    position: center;
    top: -50px;
    padding-top: 0px;
    }
    }

    Thank you!

    Have a good day,
    Toby

    Like

    Reply

  195. Ok..since I do not understand of jQuery I will have to move back to what I thanks to you already know. Is there a way to center the logo (menu) on mobile devices? Thank you in advance for your advice.

    Best, Toby

    Like

    Reply

    1. Hi Toby
      try this

      @media (min-width: 767px) {
      li.logo, li.logo a {
      display: block;
      text-align: center;
      margin-left: auto !IMPORTANT;
      margin-right: auto !important;
      float: none !IMPORTANT;
      width: 52%;
      }
      .navigation-top {

      height: auto !IMPORTANT;
      }
      .site-branding {
      margin-bottom: 0px !IMPORTANT;
      }}

      Like

      Reply

      1. Hi Om,
        That is exactly what I was looking for. It works! Thank you so much!
        Where do I have to adapt the code for the mobile version? There it still shows the logo on the left.
        Thanks again – great help!
        Toby

        Like

      2. Hi Toby
        would you mind to try this please

        @media (min-width: 320px) and (max-width: 767px) {
        .logo a {
        margin-left: auto !IMPORTANT;
        margin-right: auto !IMPORTANT;
        background-position: center;
        }}

        Regards
        Om

        Like

      3. Hi Om,
        Thank you for your quick answer!
        The logo moved towards center but ist not centered yet (still on the left part of the menu)
        Thanks for your great support.
        Toby

        Like

      4. Hi Toby
        replace the last code with this

        @media (min-width: 320px) and (max-width: 767px) {
        .logo a {
        margin-left: auto !IMPORTANT;
        margin-right: auto !IMPORTANT;
        background-position: center !important;
        }}

        Regards
        Om

        Liked by 1 person

      1. Hi Om,
        Thank you!

        I woudl like to change the background color of the mobile “Menu” . Once the menu is open the background color of the “Menu” botten turns purple. Where can I change the background color for the mobile menu?

        Thanks you again,
        Toby

        Like

  198. Hello Prakash,
    I’d like to make a very simple website with no section, just one header image and menus, I am unable to delete these “FRONT PAGE SECTION x PLACEHOLDER” that creates unwanted white space with grey horizontal lines on my website when you click on the scrolling arrow : https://hroephoto.com/
    I already put the menu on top thanks to your codes!
    I work with Twenty Seventeen child.
    Thanks in advance!
    Huguette

    Like

    Reply

    1. Hi Huguette
      would you mind to try this please

      .home .wrap .entry-content, .home article {
      display: none;
      }
      .home footer#colophon {
      margin-top: 0 !important;
      }

      let me know if that helps you or not

      Regards
      Om

      Like

      Reply

  199. Hi OM, I try to read all that comments to solve my problem, but it do no work.
    At my pages (not posts) I would like to give more space to the content: https://www.dsbok.de/datenschutzauditor/
    Like at the front page, the contet shoud stay in line with the navigation menue and the left column should also have some more width.
    I have installed the custom CSS manager and also copied you code for hiding the .page .entry-header { display: none !important;
    Can you give me an hind?

    Like

    Reply

      2. Hi Oliver
        if you want to implement for allover the pages.can u try this (just removing the page id portion)

        div#primary {
        max-width: 1200px !IMPORTANT;
        }

        Regards
        Om

        Like

  200. Thanks, will make it there. But, I have put your code to custom CSS Manager. After refesh the site again it was working. If you look now to the site, it do not work. I do not understand why it first works. Also I would like to know how I can limit how fare the contet will go to the right. The bog for the text is quite wide now.

    Like

    Reply

      4. Works proper now! At both websites. Thank you so much.
        Can you also please tell how I can also size the box to the right site? Box is now very wide.

        Like

  204. Hi Om,

    Is it possible to display the default variable font sizes in a tag cloud widget? Although this appears in the Widgets settings in the WordPress editor, it has no effect on the default template style of text blocks; perhaps underlying code unamendable?

    My site in question is not live, but here are three screenshots showing Widget settings, Additional CSS, and current results:

    https://drive.google.com/file/d/14WGCl1X_PPoZACmlvFis5vA7ZWED58Ri/view?usp=sharing

    https://drive.google.com/file/d/14YwgOqTi_PIdO7ZPJTLiSky02QjDDNEy/view?usp=sharing

    https://drive.google.com/file/d/14Q26drqo9OUdCuP8P6yBtxN5XW_T6Fcf/view?usp=sharing

    Many thanks,
    Allan

    Like

    Reply

    1. Hi Allan
      i found this code which i shared below is used in the theme, which is causing / hampering the default font size of tag cloud
      so if u find out where the code is used, then remove the font-size: 1rem !important; portion and save it
      so are u using wordpress.com? if yes, which plan u r using?

      .widget .tagcloud a, .widget .tagcloud a:visited, .widget.widget_tag_cloud a, .widget.widget_tag_cloud a:visited, .wp_widget_tag_cloud a, .wp_widget_tag_cloud a:visited {
      border: 1px solid #ddd;
      display: inline-block;
      float: left;
      font-size: 1rem !important;
      margin: 4px 4px 0 0 !important;
      padding: 4px 10px 5px !important;
      position: relative;
      -webkit-transition: border-color 0.2s;
      transition: border-color 0.2s;
      width: auto;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      z-index: 0;
      }

      Like

      Reply

      1. Hi Om, no joy. I found the code. In Chrome browser Inspect mode, I can manipute this code. For example, turning off results in variable sized tags (as desired). However, when I cut-and-paste the above into theme custom CSS and delete that line, it has no effect.

        Like

      2. Hi Allan
        so u need to find out where that code is used, otherwise as per my understanding what u r referring cant be done
        are u using wordpress.com? or can u edit theme files or styles?
        let me know

        Like

      3. Hi Om, yes, I’m using WordPress.com and I can edit theme files (Appearance > Theme file editor), but would prefer not to, for risk of breaking the site. I’m more comfortable applying Custom CSS from the menu Appearance > Customise > Additional CSS option. So, I accept that my desired change may not be possible without changing the theme’s core file.

        Like

      5. Custom CSS JS plugin successfully installed and activated. When I instered the JQueery code, the plugin responded “Available only in
        Simple Custom CSS and JS Pro”. Ugh.

        Like

      7. Sorry, yes you are correct. I got confused. It was the Preview section (and other sections) that are Pro-only.

        I applied the code but it did not appear to have any effect.

        Like

Leave a reply to Jiang Yayu Cancel reply