Tagged: ,

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • December 28, 2015 at 6:35 pm #557787
    jorgepelaez

    Hi all, I’m working on a new website and I need a header with the following:

    Top bar to add phones and email on the left side and the language switcher on the right side
    Main logo on the left side and main menu on the right side
    Secondary menu under logo (full width)

    I need to add a dark color to the logo background and keep the rest of that part white.
    All this super header must be sticky.

    Here’s an image of what I want to get.

    Sample header
    I’m sure it is possible with Enfold, so please let me know how to get this done.
    Thanks in advance.

    December 29, 2015 at 3:00 am #557941
    Elliott

    Hey Jorge!

    It might not look exact as in your screenshot but you can use the fullwidth submenu element on your page to display a menu beneath the logo and primary menu.

    As for the background on the logo send us a link to your page and we’ll see if we can get you some CSS to use.

    Best regards,
    Elliott

    December 29, 2015 at 3:18 pm #558102
    jorgepelaez

    Hi Elliott, I selected logo left menu below as option. I added the language switcher as the secondary menu in the top bar right.
    Nos, how can I add a third menu in main head area? I see that I can show social icons on that area, but I need a menu there instead of the icons.

    Can you help me with that? Basically I need three menus.
    The rest I understand that is pure CSS.

    Please let me know.

    December 30, 2015 at 2:55 am #558336
    Elliott

    Hey!

    Hmm, I think you would need to set a background image for the header and set it’s position to top left to get the gray background your wanting.

    As for the third menu we don’t have any options for that. The closest you could get would be to add a fullwidth submenu element to the page. You could do this, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, to add a widget area to your header and drag a custom menu widget to it but it’s not going to look like the default.

    Cheers!
    Elliott

    December 30, 2015 at 3:51 pm #558446
    jorgepelaez

    Hi Elliot, thanks for the advice. I added the widget as you suggested.
    Can you help me with the CSS in order to make it display as full with menu between the header and the slider please.

    December 31, 2015 at 4:18 am #558664
    Elliott

    Hi!

    Not sure I understand. Are you wanting the links of the menu to span the full width of the page? If so then try this CSS out.

    #menu-main-menu > li {
    width: 15% !important;
}
@media screen and (max-width: 900px) {
#menu-main-menu > li {
    width: auto  !important;
}
}

    Best regards,
    Elliott

    January 4, 2016 at 4:23 pm #559268
    jorgepelaez

    Hi Elliott, finally I’m getting what we need. If you reload the URL you can see that I added all the menus:
    Main Menu
    Secondary Menu (Top bar)
    Third menu (page widget)

    Now I only need to open space between menu items in order to use the full with, is this possible?

    Please let me know.

    January 4, 2016 at 4:32 pm #559280
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (min-width: 1380px) {
#top .av-subnav-menu li a {
    margin: 0 50px;
}}

    You would need to adjust the values to make it look good on all screensizes

    Cheers!
    Yigit

    January 29, 2016 at 4:11 am #574278
    ckwellington

    I am having a problem with a background header image and removing it for mobile. I added an image to header:

    .header_color .header_bg {
    background: #000000 url(//ustriminc.com/sshe/wp-content/uploads/2016/01/header-background.jpg) center center no-repeat scroll;
    }
    css
    .header_color .header_bg {
    background-color:initial;
    }
    .header_bg { margin-left:270px;
    background-color:#000000; }
    — mobile —
    @media only screen and (max-width: 1000px) {

    .header_color .header_bg {
    background: none;
    }
    }

    January 29, 2016 at 4:14 am #574281
    ckwellington

    I forgot to mention that the changes I made are reducing the screen display width from: 1310px to 910px.

    February 1, 2016 at 6:05 am #575557
    Ismael

    Hey!

    The background do not display on mobile view as expected. I’m sorry but what’s the issue? Could you please explain it a little bit further?

    Regards,
    Ismael

    February 1, 2016 at 6:54 pm #575955
    ckwellington

    The width is set to 1310px but is displaying 910px. The issue started after I added the header bkgrd image and css rule to not display on mobile.

    February 2, 2016 at 9:52 pm #576724
    Vinay

    Hey!

    At this point it is not clear what the issue is as i understand you want to make this menu a full width menu? If not true please let us know with a mockup what you like to do so we can help you better.

    Best regards,
    Vinay

    February 2, 2016 at 10:05 pm #576735
    ckwellington

    No, not a full-width menu. As it states above in our previous post: The overall width is set to 1310px but is displaying 910px (container under header). The issue started after I added the header bkgrd image and css rule to not display on mobile.

    February 2, 2016 at 10:19 pm #576750
    ckwellington

    Here is a screen shot.

    February 3, 2016 at 11:53 am #577056
    Vinay

    Hi!

    We have added the below code in the quick css to override the default width of the header in the theme.

    
/* Container width */

.container.av-logo-container{
    max-width: 1310px!important;
   width: 100%!important;
}

    Regards,
    Vinay

    February 3, 2016 at 7:10 pm #577272
    ckwellington

    It’s not the logo container -that width is fine – it’s all content below the header.

    February 3, 2016 at 7:56 pm #577298
    Vinay

    Hi!

    Please add the below code to change the container width 

    
.container {
    max-width: 1310px!important;
}

    Best regards,
    Vinay

    February 4, 2016 at 12:08 am #577427
    ckwellington

    I already tried that and it didn’t work. Also tried:
    .main_color container_wrap_first container_wrap fullsize .container {
    max-width: 1310px !important;
    }

    February 4, 2016 at 7:43 pm #578007
    ckwellington

    Any resolution on page width? Please advise. Thank you for your help.

    February 5, 2016 at 12:30 pm #578455
    Vinay

    Hi!

    Are you sure you are adding the css in Enfold theme options > general Styling > Quick CSS ?

    It’s working perfectly fine please check

    Regards,
    Vinay Kashyap

    February 5, 2016 at 8:17 pm #578724
    ckwellington

    Sorry, must have been my cache . Looks great! Thank you!

    February 5, 2016 at 10:40 pm #578817
    Vinay

    Hi!

    Glad we could help you with this. we really appreciate if you rate our theme on themeforest :)
    Please feel free to get in touch with us if you have any questions.

    Thank you for using Enfold :)

    Best regards,
    Vinay Kashyap

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Help with new header style’ is closed to new replies.