Style the Post a Request button similarly to List a Service

[leila.norouzi]

Hello everyone,

I’m facing a styling issue with the header template on Taskhive, a project I’m working on, and I could use some advice.

In the header, there are two elements: “List a service” and “Post a Request.” The problem is that these two elements have different styles. “List a service” is displayed as a button, while “Post a Request” is shown as a link with an icon. This inconsistency might confuse users, and I want to make them both look the same. I tried a CSS hack to make “Post a Request” look like “List a service,” but I’m struggling to remove the icon from “Post a Request.”

Additionally, I noticed that “List a service” and “Post a Request” use different fonts, especially noticeable in the letter “a.” This difference in fonts negatively affects the header’s overall appearance. How can I ensure that both elements use the same font to create a more polished and cohesive design?

Thank you

[leila.norouzi]

Update:

I have changed the code in request-submit-link.php to fix the issue. And it works.

<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
?>
<button type="button" class="hp-menu__item hp-menu__item--listing-submit button button--secondary" data-component="link" data-url="<?php echo esc_url( hivepress()->router->get_url( 'request_submit_page', [ 'vendor_id' => 0 ] ) ); ?>"><?php esc_html_e( 'Post a Request', 'taskhive' ); ?></button>

[andrii]

Hi,

This is how it should work by default because this is the theme’s design. Also, please note that you need to change the theme files only using the child theme How to create a child theme - HivePress Help Center because when you update from our side, all changes will be restored. Alternatively, you can check out this doc How to add custom code snippets - HivePress Help Center.

[leila.norouzi]

Here is the CSS code I have used:

/* ---Alteration in "Post a Request" --- */

.hp-menu--site-header .hp-menu__item--request-submit {
    display: inline-block;
    padding: 0.5625rem 1.75rem;
    background-color: rgba(202, 67, 29, 0.85);
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.hp-menu--site-header .hp-menu__item--request-submit:hover {
    background-color: rgba(202, 67, 29, 0.75);
}

/* To hide the icon */
.hp-menu--site-header .hp-icon {
  display: none !important;
}

/* To have same font  for list a service and post a request*/
.hp-menu--site-header .hp-menu__item--request-submit,
.hp-menu--site-header .hp-menu__item--listing-submit {
    font-family: "Ionicons", sans-serif; /* Use Font Ionicons*/
    font-weight: 100; /* Adjust font-weight for boldness, if needed */
}