Home Forums Weaver Xtreme Theme Header / Menu Bar Positioning & Fixed Browser Top

Viewing 16 posts - 1 through 16 (of 38 total)
  • Author
    Posts
  • #17907
    GR8FL
    Participant

    I want the Header Image aligned left and the menu bar aligned right. I want the menu bar to be aligned to the bottom of the header.

    The header image is only 550 x 120 and that should be enough to fit both. I could make the image be as wide as the theme (960 x 200).

    Then I want the header & menu bar to be fixed at top when scrolling. What do I need to put in the HTML Insertion Area > Fixed Browser Top?

    Thank you.

    Site: http://demo.littledropup.com/

    #22736
    scrambler
    Moderator

    If you want the header image and a menu side by side, you first need to decide what happens when the browser will get smaller and there wont be enough space for them both.

    Should the menu bar get on several lines and the Header image scale down, or should they stack, etc….

    Then you will have to create you own layout using one of the 3 options below.

    1) For an easy control of the layout, you can use the header Widget area, there you can define your own widget layout, including how it changes on smaller devices using the “plus” Custom Widget Width options. In one widget you put the header image, in the other an Extra Menu shortcode.

    This will be the easiest way to define the layouts, but you would need to use Custom CSS to fix the header widget area.

    2) Create your own divs for the header image and the Extra menu shortcode and place them in the Top fixed HTML Insertion area. If you just need the header image and the menu to share the space 50/50 and want them stacked on phone, use the contet-2-col classes

    <div>
    <div class=”content-2-col”>Your Header image</div>
    <div class=”content-2-col”>Extra menu shortcode</div>
    </div>

    3) If you need fancy percentages and different behaviors for tablet and phones you could either add CSS to the solution 2, or you could:

    • Create a Per page widget area (bottom of the sidebar & Layout page)
    • Place two widgets in it (one with the image one with the extra menu)
    • Insert that widget Area in Advanced options > Fixed top area using the “Plus” Widget Area Shortcode, using the area_style=’header’  option so that your custom widget area uses the formatting defined in the header widget area.
    • Set the layout for desktop / small tablet and phones for your two widgets in the header widget area custom widget width options. 
    #22737
    GR8FL
    Participant

    I want it the easiest way.

    Can you tell how Maureen did this site: http://chippendalehoa.net/

    I am using Firefox now, but can’t figure which tool(s) to use to figure this out myself.

    #22738
    scrambler
    Moderator

    Method 2 

    One thing you did not say is if you also want these fixed at all on mobile?

    Maureen is actually hiding the fixed area on mobile and using an alternate menu there

    #22739
    GR8FL
    Participant

    I don’t need it fixed on mobile. I don’t think it will look right.

    So what you are saying to do this so far is to create whatever normal header image I want (can be width of theme and any reasonable height) and for fixed, have alternative image for header that fits within the constraints of 2 column div (say about 400 x 100). And for menu fixed, use extra menu as an option.  Okay, I think I get that.

    I would just go ahead and disable this idea on mobile and use what is normally available.

    #22740
    scrambler
    Moderator

    To manage mobile, you would hide the standard header image and standard menu on desktop only using their “hide Area” option.

    Then you place the content of your Fixed Top HTML Insertion area in a [show_if device='desktop'] shortcode, so the fixed area only shows on desktop

    #22741
    GR8FL
    Participant

    I need to get the basic questions first out of the way… thought it would be easier to add them all in one thread. So let me start with first question.

    I want to move the menu bar into the header so it sits inside of it on the top right. Just a straight menu bar that has no borders, shadows, etc.

    I then want to make the header have border 8px borders: {border-radius:8px 8px8px 8px;-moz-border-radius:8px 8px8px 8px;-webkit-border-radius:8px 8px8px 8px;}

    Right now this site is not right and a mess!

    Help.

    http://demo.littledropup.com/

    #22742
    scrambler
    Moderator

    Assuming the name of the custom menu used as primary menu is  topmenu (if not change it in the extra menu shortcode below), put the code below in Advanced options > HTML Insertion > Fixed Browser top box

    [show_if device='desktop']<div>
    <div class=”content-2-col”>[header_image]</div>
    <div class=”content-2-col”>[extra_menu menu_name='topmenu' menu_style='primary' menu_type='standard']</div>
    </div>
    [/show_if]

    Add the rule below to Main Options > FOnts & Custom > Custom CSS Rule box to make space for the fixed header on desktop
    .is-desktop #wrapper {margin-top:100px;}     

    with the value that matches your fixed header height

    Then  select “Hide Desktop” in Main options > Header > Header Area > Hide Area drop down list to hide the standard header on desktop, so only the fixed area shows in that mode.

    #22743
    GR8FL
    Participant

    UGH… what am I doing wrong?

    #22744
    scrambler
    Moderator

    You really need to make an effort and express what is in your head instead of assuming we read your mind 🙂

    The only thing I can see wrong is that it appears your content is not inside the show if shortcode, so I suspect you made a syntax error in the code I gave you

    Please paste the code you have in the fixed browser top box here

    #22745
    GR8FL
    Participant

    You really need to make an effort and express what is in your head instead of assuming we read your mind…. really??? I thought you had xray powers to intuit what I expressed.

    Shortcode:
    [show_if device='desktop']<div>
    <div class=”content-2-col”>[header_image]</div>
    <div class=”content-2-col”>[extra_menu menu_name='topmenu' menu_style='primary' menu_type='standard']</div>
    </div>

    If you look above, you will see that I also asked aside from the fix header question was how I can have the menu bar be inside of the header area at the top right?

    Thank you.

    #22746
    scrambler
    Moderator

    You are missing the closing [/show_if] shortcode…

    [show_if device='desktop']<div>
    <div class=”content-2-col”>[header_image]</div>
    <div class=”content-2-col”>[extra_menu menu_name='topmenu' menu_style='primary' menu_type='standard']</div>
    </div>
    [/show_if]

    Shortcodes  are like html tag you have to close them [shortcode}….[/shortcode]

    I do not understand your last question. The code above does place the menu in the top right of the header

    #22747
    GR8FL
    Participant

    I closed the [/show_if] but still not right

    #22748
    scrambler
    Moderator

    Well, I see a header image at the top left and a menu at the top right in a fixed area on desktop, that disappears on mobile to let the regular header and menu be visible on  mobile.

    So unless  you care to qualify what you mean by not right, I don’t read your mind … really

    #22749
    GR8FL
    Participant

    I cannot see the header and menu bar on the desktop since it is set to hide. Only very tiny top part is showing.

    I haven’t even looked at the mobile version.

    I am using Firefox. If you can tell me how to attach a screen shot, I will do so.

    EDIT: Just looked at it in IE and it looks better, but….

    It should not overlay on top of the content. It should stay fixed.

    #22750
    scrambler
    Moderator

    We are really not communicating here.

    “I cannot see the header and menu bar on the desktop since it is set to hide.”

    Are you looking at the site when NOT logged in. Because WordPress does not handle fixed area well, and when you are logged in, the fixed area will be under the wordpress admin bar.

    If you want more space at the top of the fixed area, you can add top padding by adding the rule below in Advanced options > HTML Insertion > Fixed Browser top BG CSS+ box

    {padding-top:50px;}


    “It should not overlay on top of the content. It should stay fixed.”

    By definition if something is fixed at the top of the page, when you scroll the page, the content will scroll under it.

    Right now you have no background color in your Fixed browser top area, but you can set a color in the Fixed Browser top BG box, so that when the content scrolls up it fully disappears under the fixed top area.

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