changing menu text color, changing social media & author position

  • Unknown's avatar
    urbanbeee · Member ·

    Hello, please give me following.
    1. separate css code for pc, tablet and mobile screen.
    2. I donot want featured content in mobile
    3 changing the menu text and follow/search button colors in the menu bar.
    4 moving the author / social media to the top but below featured image.

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, it looks like you have gotten some of these changes made, such as not showing the featured content on mobile.

    For the menu text, social icon and search icon colors, there are two colors set. One for the at rest, non-hover state and one for when you hover a mouse over them. These would be the two CSS rules to change the colors. The following custom CSS will allow you to change those to whatever color you desire. I just pulled the orange-ish color, and the red color from your site title/logo. 

    .main-navigation a {
  color: #FD9940;
}
.main-navigation a:hover {
  color: #B5222B;
}
.jetpack-social-navigation a:before {
  color: #FD9940 !important;
}
.jetpack-social-navigation a:hover:before {
  color: #B5222B !important;
}
.header-search button {
  background-color: #FD9940
}
.header-search > .header-search__click:hover{
  background-color: #B5222B;
}

    The sharing buttons are within the same div as the post content, which means that we could move that to the top of the post content, but this sometimes comes with some drawbacks and sometimes doesn’t work on all posts due to post variations. You can add this and then check a bunch of your posts to make sure things look alright, and make sure and check multiple posts on tablet and phone as well. 

    .single .entry-content {
  position: relative;
  padding-top: 150px;
}
.single .entry-content #jp-post-flair {
  position: absolute;
  top: 0;
  width: 100%;
}

    On moving the author, I assume you are talking about the author info box that is below the sharing icons. This will move it to the top below the post title and date/categories/tags block and above the sharing icons and post content. This change will not show on older browsers, and in the case of Internet Explorer, it will not show on browsers before version 11, such as IE 10 and 9. That is because they do not support this sort of advanced CSS. 

    .single article {
	display: flex;
	flex-direction: column;
}
.single .entry-media {
	order: 1;
}
.single .entry-header {
	order: 2;
}
.single .entry-author {
	order: 3;
}
.single .entry-content {
	order: 4;
}
  • Unknown's avatar
    urbanbeee · Member ·

    Thank you so much thesacredpath 😊

    Sent from Mail for Windows 10

    From: WordPress.com Support ForumsSent: 16 March 2018 05:49To:

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome. Let me know if you have any problems.

  • Unknown's avatar
    urbanbeee · Member ·

    Dear SacredPath,

    One more request. Please inform how to reduce size (height & width) of sliding feature content.

    Thanks in advance,

    Regards,

    Meera V M

    Sent from Mail for Windows 10

    From: WordPress.com Support ForumsSent: 17 March 2018 00:33To:

  • Unknown's avatar
    thesacredpath · Member ·

    Meera, I’m not seeing a slider on your site right now. Can you point me to where it is?

  • The topic ‘changing menu text color, changing social media & author position’ is closed to new replies.