Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #483568


    I want a secondary menu on my site but I would like to put it on the same line as the primary menu. I have three menu items for the secondary menu and I would like to align them on the right side of the menu bar. it would be great if that section of the menu bar could have a different background color but I’m not sure if that is possible. I appreciate any help you can give me and thank you for the time!

    The first link below illustrates the ideal setup.

    The background of just the menu bar is a yellow color. Then the secondary menu is aligned to the right with a blue background color. I would have to change the font color of those menu items, probably to yellow. I hope the image makes sense and this is a relatively easy fix. Thanks again.


    Hey blancsolutions!

    Go ahead and do this,, to add a widget area to your header. Next drag the custom menu widget to this new widget area and let us know when your done and we’ll give you some CSS to use.



    Thanks for the speedy reply. I followed those instructions and here is the link to the website again.


    Not sure if the CSS will actually end up putting that widget on the menu line or if I followed the instructions wrong on the link you sent me. Let me know if I messed up.



    Did you remove the widget? I can’t see it in the header. We need to be able to inspect it in order to give you some custom CSS to position it properly.



    Yes, I did temporarily. It’s back on there. Sorry about that.



    Add this to your custom CSS.

    #header .widget {
      position: absolute;
      right: 0;
      top: 70px;
      z-index: 999;
    #header .widget * { display: inline !important; }



    Great, it looks much better! A few additional questions. When I scroll down, the secondary menu doesn’t stay with the rest of the menu when you start scrolling down the site, is there anything I can do about that? Also, this may be picky but is there a way to change the secondary menu font to the same size as the other menu items. And could I center those secondary menu items using the width of the sidebar as the point of reference?

    Thanks, here is the website link.



    for your sticky menu try this code:

    div#header_meta {
    position: fixed;
    top: 0px;
    width: 90%;
    strong.logo {
    margin-top: 30px;
    div#header_main_alternate {
    top: 30px;

    Best regards,

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