Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 5, 2015 at 8:03 pm #483568
    blancsolutions

    Hello,

    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.

    August 5, 2015 at 8:16 pm #483577
    Elliott

    Hey blancsolutions!

    Go ahead and do this, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, 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.

    Regards,
    Elliott

    August 5, 2015 at 9:10 pm #483590
    blancsolutions

    Thanks for the speedy reply. I followed those instructions and here is the link to the website again. http://www.nickcookdesign.com/frankfordfriends/

    August 5, 2015 at 9:14 pm #483591
    blancsolutions

    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.

    August 6, 2015 at 10:48 am #483775
    Rikard

    Hi,

    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.

    Thanks,
    Rikard

    August 6, 2015 at 1:55 pm #483862
    blancsolutions

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

    August 6, 2015 at 5:26 pm #484048
    Elliott

    Hi!

    Add this to your custom CSS.

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

    Regards,
    Elliott

    August 6, 2015 at 5:37 pm #484058
    blancsolutions

    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. http://www.nickcookdesign.com/frankfordfriends/

    August 7, 2015 at 1:18 pm #484516
    Andy

    Hey!

    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,
    Andy

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