Some tweaks Menu and Titles,

  • abdullahdostkhan · Member ·

    Hello, I have been on a couple other themes over the years which were in one way or another compromised, when I migrated to this new domain (https://abdullahkhan.art/) I thought it was time for a change have decided to switch to use your theme because it offers the near perfect configuration for my needs. It is wonderful and I like how it displays 3 columns on the homepage, the minimalist title bar, multiple sidebar and footer orientation options.

    I would like to tweak it however, I would appreciate your help with the following:

    1. on tablet, retain the desktop menu layout and on mobile, Remove the word ‘Menu’ from burger, fit the burger to the left of the title to have a single menu bar
    2. remove the search function/icon globally
    3. on home images, no blackout on scrollover, 2px borders, post titles Auto Capitalised and not all caps, likewise with site title
    3. post title move below featured image, and also remove button and gradient from featured image
    5. on pages, title margin normal without featured image panel

    With these tweaks applied it would be a perfect configuration for a very long time. Thank you.

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

  • tarasdashkevych · Theme Author ·

    Hello Abdullah,
    Thank you for using the Hermes theme on your WordPress site!

    “… remove the search function/icon globally …”
    – Please use this custom CSS to hide the search button located in the site header section:

    
.header-search-button {
  display: none;
}

@media (min-width: 992px) {
  .header-controls .social-list {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }
}

    —

    “… on tablet, retain the desktop menu layout …”
    – Please use this custom CSS to display a regular menu in tablet views:

    
@media (max-width: 992px) and (min-width: 500px) {
  .site-branding {
    width: auto;
    border-right: 1px solid var(--color-secondary-base);
    margin-right: 0.5rem;
    padding-right: 0.75rem;
  }
  
  .main-navigation {
    display: block;
    text-align: center;
    width: auto;
    margin-left: 0;
  }
  
  .header-controls {
    display: none;
  }
}

    —

    “… on mobile, Remove the word ‘Menu’ from burger, fit the burger to the left of the title …”
    – Please use this custom CSS to change appearance of the mobile menu button in mobile views:

    
@media (max-width: 500px) {
  .site-branding {
    width: auto;
  }
  
  .header-controls {
    width: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    margin-left: auto;
  }
  
  .header-menu-button span {
    visibility: hidden;
    width: 1px;
    height: 1px;
  }
}

    —

    “… on home images, no blackout on scrollover, 2px borders, post titles Auto Capitalised and not all caps, likewise with site title …”
    – To remove hover effect, please use this custom CSS:

    
.hentry-grid .hentry.has-post-thumbnail:hover .hentry-overlay,
.hentry-grid .hentry.post-password-required:hover .hentry-overlay {
  background-color: rgba(0,0,0,0.3);
}

    By default, the grid items already have 2px borders. You can increase it by using this custom CSS:

    
.th-inner-border {
  box-shadow: 0 0 0 4px var(--color-primary-base);
}

    To style of the titles, please use this custom CSS:

    
.site .entry-title,
.site .site-title {
  text-transform: capitalize;
}

    —

    “… post title move below featured image, and also remove button and gradient from featured image …”
    – Please use this custom CSS:

    
.fullscreen-header.has-featured-image::before,
.fullscreen-header.has-featured-image .skip-to-entry {
  display: none;
}

.fullscreen-header.has-featured-image {
  justify-content: flex-end;
  overflow: hidden
}

    Unfortunately, it’s not possible to move the page title below the featured image in single views.

    —

    “… on pages, title margin normal without featured image panel …”
    – To remove background and extra spacing from the page header when the featured image is not set, please use this custom CSS:

    
#primary-header:not(.has-featured-image) {
  background-color: #ffffff;
}

#primary-header:not(.has-featured-image) .container {
  padding-bottom: 0;
  padding-top: 3rem;
}

    Here is a quick guide on how to use a custom CSS at WordPress.com: https://wordpress.com/support/custom-design/editing-css/

    Please let me know if you have any additional questions regarding this topic.

    Kind regards,
    Taras

  • abdullahdostkhan · Member ·

    Hello Taras,

    Thank you so much for your prompt response. I have added these changes to my website, but am facing some minor issues:

    1. On the landing/home page, the title is a certain font but that changes on any post or page that isn’t the home page
    2. On tablet, the menu is on the far right instead of the stuck to the site title on the left, it also seems to be missing the “|” separator seen on desktop between site title and menu
    3. On mobile, the menu burger shows up to the right side of the site title, instead of being to the extreme left with site title on its’ right
    4. As for the post title on featured images, the removal of button, gradient is an improvement and the fading, scrolling title text is nice but if i cant move the title off the featured image would it be possible to fix the title in place somewhere on the bottom-left of the image (aligned with text). I would also like to alter the size of the title font.
    5. Please remove the word “close” in the mobile menu
    6. On post pages, it it possible to modify “Previous Post” and “Next Post” into simply “Previous” and “Next”?
    6. and finally, since the theme is set to display a dynamic home page, the site is showing up on google as the following; i’m wondering if there is any way to clean this up:
    Abdullah Khan
    abdullahkhan.art
    Close. Abdullah Khan · About · Contact · Shop. Menu Open a search form in a modal window. Paintings · Heavy Metal. Posted on December 15, 2020 January 6, …

    I think the page is very close to final, with these issues resolved I should be good to go. Deeply appreciate your help. Thank You, Abdullah

  • tarasdashkevych · Theme Author ·

    Hello Abdullah,

    “On the landing/home page, the title is a certain font but that changes on any post or page that isn’t the home page”
    – Could you please elaborate more on this? Post titles in archive views (home page) and single view pages has the same font family but different font size. Do you want to increase the size of the title in archive views?

    —

    “… On tablet, the menu is on the far right instead of the stuck to the site title on the left …”
    – I’ve just updated the CSS in my initial post: https://premium-themes.forums.wordpress.com/topic/some-tweaks-menu-and-titles/#post-160438

    —

    “On mobile, the menu burger shows up to the right side of the site title, instead of being to the extreme left with site title on its’ right”
    – Make sure to use the custom CSS which was posted in my initial post. In that CSS, I am using margin-left: auto; for .header-controls but when I inspect your site, I see margin-left: 0; . This is the reason why the menu button is located next to the site title.

    —

    “… to fix the title in place somewhere on the bottom-left of the image (aligned with text). I would also like to alter the size of the title font …”
    – Please use this custom CSS:

    
.fullscreen-header .entry-title {
  text-align: left;
  font-size: 32px;
  letter-spacing: 0;
}

.inactive-sidebar .fullscreen-header .entry-title {
  max-width: 800px;
  margin: 0 auto;
}

    —

    “Please remove the word “close” in the mobile menu”
    – Please try this custom CSS to hide this text:

    
.toggle-sidebar-close-button {
  font-size: 0;
}

    —

    “On post pages, it it possible to modify “Previous Post” and “Next Post” into simply “Previous” and “Next”?”
    – Unfortunate, it’s not possible to remove those words but you can use this custom CSS if you want to hide these titles: 

    
.post-navigation .meta-title {
  display: none;
}

    —

    “…and finally, since the theme is set to display a dynamic home page…”
    – Some information in Google search results is controlled by the SEO functionality. WordPress themes do not provide options for SEO because it’s against WordPress coding standards. Such functionality has to come from plugins.

    By default, the WordPress.com core provides some SEO functionality: https://wordpress.com/support/seo/

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • abdullahdostkhan · Member ·

    “On the landing/home page, the title is a certain font but that changes on any post or page that isn’t the home page”
    – Could you please elaborate more on this? Post titles in archive views (home page) and single view pages has the same font family but different font size. Do you want to increase the size of the title in archive views?

    I’m referring to the site title. On the home page, you will note the font is formatted nicely. When I click on a page, on go into a post, the site title loses its formatting. When I click the site title to go back to the homepage, the formatting returns. This is happening on tablet and mobile formats too.

    “… On tablet, the menu is on the far right instead of the stuck to the site title on the left …”
    – I’ve just updated the CSS in my initial post: https://premium-themes.forums.wordpress.com/topic/some-tweaks-menu-and-titles/#post-160438

    I’ve updated the CSS but see no change, the tablet menu still sticking to the right.

    “On mobile, the menu burger shows up to the right side of the site title, instead of being to the extreme left with site title on its’ right”
    – Make sure to use the custom CSS which was posted in my initial post. In that CSS, I am using margin-left: auto; for .header-controls but when I inspect your site, I see margin-left: 0; . This is the reason why the menu button is located next to the site title.

    Likewise on mobile, the change from Auto to 0 on the left margin was made by me in an attempt to fix it, and forgot to change back. In any case, the mobile burger is still on the right.

    “… to fix the title in place somewhere on the bottom-left of the image (aligned with text). I would also like to alter the size of the title font …”
    – Please use this custom CSS:

    This CSS works fine on desktop but the title is centralised on the tablet and mobile versions. Also the parallax and fade on the post title is still active, can this be made static on the bottom left of the featured image?

    Also on the home page, the post titles are all in bold, can I have them in normal and in, say size 12px?

  • tarasdashkevych · Theme Author ·

    Abdullah,

    “I’m referring to the site title…”
    – Thank you for providing additional info. I can see the issue now. It seems like it’s caused by the Custom Fonts functionality. Please add this custom CSS for now to resolve this issue:

    
.site-title {
  font-family: "Montserrat",sans-serif;
}

    —

    I’ve just refactored the entire custom CSS for tablet and mobile devices. Please try this custom CSS instead:

    
/* Display site branding border in smaller screens */
@media (max-width: 992px) {
  .site-branding {
    width: auto;
    border-right: 1px solid var(--color-secondary-base);
    margin-right: 0.5rem;
    padding-right: 0.75rem;
  }
}

/* Display a regular menu in tablet views */
@media (max-width: 992px) and (min-width: 500px) {
  .main-navigation {
    display: block;
    width: auto;
    margin-left: 0;
  }
  
  .header-controls {
    display: none;
  }
}

/* Move the mobile button next to the site title in mobile views. */
@media (max-width: 500px) {
  .header-controls {
    width: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    margin-left: 0.45rem;
  }
  
  .header-menu-button span {
    visibility: hidden;
    width: 1px;
    height: 1px;
  }
}

    Before adding this custom CSS to your site, make sure to remove the old one:

    
@media (max-width: 992px) and (min-width: 500px) {
 .site-branding {
  width:auto
 }
 .main-navigation {
  display:block;
  text-align:center;
  width:auto;
  margin-left:auto
 }
 .header-controls {
  display:none
 }
}
@media (max-width: 500px) {
 .site-branding {
  width:auto
 }
 .header-controls {
  width:auto;
  border-top:0;
  padding-top:0;
  margin-top:0;
  margin-left:auto
 }
 .header-menu-button span {
  visibility:hidden;
  width:1px;
  height:1px
 }
}

    —

    “Also the parallax and fade on the post title is still active, can this be made static on the bottom left of the featured image?”
    – The animation of the page header section is done using a special JavaScript code. So, we need to use this custom CSS to disable this effect:

    
/* disable page header animation */
.site-content .fullscreen-header .container {
  transform: none !important;
  opacity: 1 !important;
  width: 100%;
  padding-bottom: 2rem;
}

    This custom CSS should also fix the alignment of the title in smaller screens.

    —

    “Also on the home page, the post titles are all in bold, can I have them in normal and in, say size 12px?”
    – Sure. Please use this custom CSS:

    
.hentry-grid .entry-title a {
  font-weight: normal;
}

.hentry-grid .entry-title {
  font-size: 12px;
}

    Please let me know if you have any additional questions. I am here to help!

    Kind regards,
    Taras

  • abdullahdostkhan · Member ·

    Hi Taras,

    Thanks for the changes, looks great.

    I would like to make the site title semibold and increase the size, say, size 20, while retaining it’s integrity on all pages? It seems a bit small and would look much more balanced with this change compared to other titles on the website.

    on mobile menu, any chance the menu can scroll in from the right side instead of the left of the screen? Since the burger on the right?

    Also the Menu close button is yellow and not inheriting the theme colour of #043fe0, could you add this manually?

    Also WordPress is showing a follow button on desktop and a bar at the bottom on mobile, is there any way to remove this? Is this removal possible through a business plan? If so, I will upgrade.

    Also the footer titles are still allcaps, can they be changed to lowercase or autocapitalised?

    And thats pretty much it.

    Thanks again,
    Abdullah

  • tarasdashkevych · Theme Author ·

    Hello Abdullah,

    “I would like to make the site title semibold and increase the size, say, size 20, …”
    – I am not sure if your font supports semibold but you can play with the font-weight property (https://www.w3schools.com/cssref/pr_font_weight.asp):

    
.site-title {
  font-size: 20px;
}

.site-title a {
   font-weight: 600;
}

    —

    “on mobile menu, any chance the menu can scroll in from the right side instead of the left of the screen? …”
    – Please try this custom CSS:

    
.site {
  transition: none;  
}

.active-toggle-sidebar .site {
  left: auto !important;
  right: 340px
}

.toggle-sidebar,
.hidden-toggle-sidebar .toggle-sidebar {
  animation: none;
}

.active-toggle-sidebar .toggle-sidebar {
  left: auto;
  right: 0;
}

    Note, it does not have an animation to avoid style issues.

    —

    “Also the Menu close button is yellow and not inheriting the theme colour of #043fe0, could you add this manually?”
    – Please use this custom CSS to change a color of that button:

    
.toggle-sidebar-close-button {
  color: #043fe0;
}

    —

    “Also WordPress is showing a follow button on desktop and a bar at the bottom on mobile …”
    – Please see this post: https://wordpress.com/forums/topic/remove-the-follow-button/

    —

    “Also the footer titles are still allcaps, can they be changed to lowercase or autocapitalised?”
    – Please use this custom CSS to autocapitalised your widget titles in the footer area:

    .site-footer .widget-title {
  text-transform: capitalize;
}

    Let me know if you have any additional questions.

    Kind regards,
    Taras

  • abdullahdostkhan · Member ·

    Hello Taras,

    Thank you so much for your help and patience. All issues are resolved and I am very happy with the end result. I shall be using this template for many years to come. Thank you once again.

    Best Regards,
    Abdullah

  • tarasdashkevych · Theme Author ·

    Hello Abdullah,

    You are always welcome! If you’ll have any other questions regarding the theme, feel free to open a new thread in this forum and I will be happy to help.

    Kind regards,
    Taras

  • The topic ‘Some tweaks Menu and Titles,’ is closed to new replies.