Customizing Header Widgets Area


Hey there! Have you noticed this support service is provided FREE of charge?
If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

Consider a donation →

Home Forums Monument Valley Customizing Header Widgets Area

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #22748

    Customizing Header Widgets Area


    Hi Oliver,

    First off, let me say how much I love your themes! I came across them by chance because I was looking for an Accessibility compliant theme. I feel they deserve to be much higher in the ranks with the big players with such clean code, beautiful UX and functionality, superb documentation & support. Most of the top-ranking themes are crammed with shortcode and really need to be unseated from their top spots.

    Regarding the theme, my plan is to use the header widgets area as a secondary menu, and I need your help/direction with how I can do the following:

    1. Move the Social Menu from the Primary Menu area to the Header Widgets area and right-align the primary menu

    2. If I introduce a 3rd widget in the header widgets area, it gets left-aligned automatically. Is it possible to right-align these widgets?

    3. I need to input a colourised “Donate” button in the header widgets area (we need a button constantly at the top since we a not-for-profit). What would be the best way to do this? (Some method that fits in well with the theme button styles).

    4. How can I reduce the height (or padding) in the header-widgets area?

    If it helps, I have attached a screenshot of our approved wireframe to give you an idea of what we are trying to achieve.

    Many thanks for your help in advance!


    WebMan Design

    Hi Roe,

    Thank you, I’m glad you like my themes and find them useful :) If you don’t mind I’d like to use your words as customer testimonials at my website Please let me know if it is OK with you. Thank you!

    1. You should be able to display the social menu using “Navigation Menu” widget in header widgets area. Just select your social menu and it should display just fine.
      To right align the menu, please check the previously resolved support ticket for solution. Finally, you can hide the social menu in header using custom CSS:

      .site-header-inner .social-links {
      	display: none;
    2. You can use this custom CSS:
      .header-widgets .widget:first-child {
      	margin-left: auto;
      .header-widgets .widget:last-child {
      	-webkit-flex-grow: 1;
      	-ms-flex-positive: 1;
      	flex-grow: 1;
      	text-align: right;
    3. This really depends on how you treat your donations. Do you use a plugin? Check out the plugin docs for help on displaying such button. Or just simple button with a URL? In that case you can use Custom HTML or Text widget and use this HTML code to display the button:
      <a href="YOUR_DONATION_URL_HERE" class="button button-donation">Donate</a>
      That way the link will take the theme’s button styles and you can still use a custom .button-donation class in your custom CSS to style it further to your needs.
    4. You can use custom CSS such as:
      .header-widgets .widget {
      	padding-top: 5px;
      	padding-bottom: 5px;

    Tip: Try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.