add custom button / link placement in header

  • Resolved momentumrising

    (@momentumrising)


    2 years, 5 months ago

    I would like to add a few custom links/buttons to the header. When I add them to the secondary menu as described in some how-to articles, it adds the menu in the top center of the header, right aligned to be flush with the products search box. It also pushes the main title of the page over to the left a little bit, causing it to wrap to a second line.

    Is it possible to have the secondary menu be placed instead in the bottom center of the header, right aligned to be flush with the mini cart widget? If not, is it possible to have it place itself where it does so now, but prevent the main title words from wrapping to a second line?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi there!

    Thanks for contacting us!

    I understand you’d like to add links/buttons to the header and when you add it to the secondary menu, it causes the site title to wrap.

    It may be difficult to add the custom links to the primary menu and make them right aligned before the mini cart widget.

    But you could try adjusting the width of site title, secondary menu, and search bar so that it all fits into one line, using the CSS snippet below:

    
.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
  width:32%;
  margin-right:3%;
}
.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
  width:42%;
  margin-right:3%;
}
.woocommerce-active .site-header .site-search {
  width:20%;
}

    (You can paste the CSS above in Appearance > Customize > Additional CSS box)

    I hope this helps! ??

    Thread Starter momentumrising

    (@momentumrising)

    That worked great! Thank you very much for this information. I think I’ll have to use this strategy for some other layout issues on the site as well. How did you find out which CSS tags to specify such as “.storefront-secondary-navigation.woocommerce-active .site-header .site-branding” and the other ones?

    Thanks again.

    Hi there,

    Thanks for getting back to us.

    You can right-click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser. Please see: https://www.woocommerce.com/videos/how-to-use-firebug-to-modify-a-wordpress-theme/ to learn more.
    ?
    Here is a screenshot of the Chrome > Inspect Element tool for this:


    ?
    If you’d like to learn more about CSS this is also a great tutorial: https://tutsplus.com/course/30-days-to-learn-html-and-css/`

    Best,

    Hi there @momentumrising,

    We haven’t heard back from you for a while, so I’m going to mark this post as resolved now. If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

    In addition to what Daniyal shared, I also I recommend checking out these guides for customizing your site’s CSS:

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘add custom button / link placement in header’ is closed to new replies.