Tagged: ,

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #557787

    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.

    #557941

    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

    #558102

    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.

    #558336

    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://www.kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -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

    #558446

    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.

    #558664

    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

    #559268

    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.

    #559280

    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

    #574278

    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;
    }
    }

    #574281

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

    #575557

    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

    #575955

    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.

    #576724

    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

    #576735

    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.

    #576750

    Here is a screen shot.

    #577056

    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

    #577272

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

    #577298

    Hi!

    Please add the below code to change the container width

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

    Best regards,
    Vinay

    #577427

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

    #578007

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

    #578455

    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

    #578724

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

    #578817

    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

Viewing 23 posts - 1 through 23 (of 23 total)

The topic ‘Help with new header style’ is closed to new replies.