Home Forums Weaver Xtreme Theme would like to add logo on Weaver Xtreme

Viewing 16 posts - 1 through 16 (of 23 total)
  • Author
    Posts
  • #18344
    [Deleted User]
    Participant

    I want to add my logo to the left of the navigation. I would like it to about 125 – 150 px high. http://maverickmediainteractive.com/smroof/

    Will this work with the free version? I thought I saw somewhere where the new release will have this option but I think I have the latest version. How do I code this in?
    Thanks!
    #24870
    scrambler
    Moderator
    This would be a lot easier with the “plus” Plugin, as you could simply use the header widget area with two widgets, the logo in the left one, and the menu using the extra menu shortcode in the second.
    And you could define how they share the site width using the custom widget width option.
    If you cant afford the “plus” plugin, you dont have extra menus or custom widget width, so you could do the following
    Set your logo as the header image.
    Then add the rules below in Main Options > Fonts & Custom > Custom CSS Rule box to make the header image and the menu share the site width.
    If you want the menu bar to be aligned with the top of the logo image use
    @media all and (min-width:768px){
    #header-image {width:40%;float:left;}
    #nav-primary {width:60%;float:right;}
    .clear-branding, .clear-menu-primary {clear:none !important;}
    }
    Use any width % mix as long as the total is 100% (40% + 60% in the example above)
    If you want the menu bar to be aligned with the bottom of the logo image use the rules below instead
    @media all and (min-width:768px){
    #header {position:relative;}
    #header-image {width:40%;float:left;}
    #nav-primary {width:60%;position:absolute;bottom:0;right:0;}
    .clear-branding, .clear-menu-primary {clear:none !important;}
    }
    If you need more help post a link to the page with your rule in place (telling us which one you have in)

    #24871
    [Deleted User]
    Participant

    Hi,

    Thanks for your help. I used the first one…but I want the logo in a different spot. I want it moved up to the nav secondary area (I think)…but couldn’t get it work…then I want the menu (which a a secondary menu to the right of the logo.
    I won’t be using the primary menu, instead I will use shortcode to insert a slider.
    #24872
    [Deleted User]
    Participant

    Hi, I fixed it and used primary menu instead. Thanks for your help.

    #24873
    scrambler
    Moderator
    If you are going to add more elements to your header, you need to give us the whole picture right away so we can devise the appropriate solution.
    If you are going to want a slider below the logo and menu, we probably need a different approach (which may be a bit of a challenge without “plus”)
    So once you know the full composition of the header let us know 🙂
    #24874
    scrambler
    Moderator
    If you want a logo and menu side by side at the top, and below that a slider on all pages, then you will need to modify the solution.
    Use the secondary menu instead of the primary menu
    Hide the header image
    Put the image in the Site Logo HTML Box
    Put the Slider in the Header HTML Area
    use the rule below
    @media all and (min-width:768px){
    #header {position:relative;}
    #site-logo {width:40%;float:left;}
    #nav-secondary {width:60%;position:absolute;top:0px;right:0px;z-index:200;}
    }

    and adjust the position of the menu with the top value
    #24875
    [Deleted User]
    Participant

    Hi,

    Thanks for all your suggestions. I think I have the effect I want.
    How do I make the TOP Left corner of the black primary menu corner rounded. I see in the settings how to do that to top and bottom left and I tried adding my own css for top left but it didn’t work.
    when viewing on phone I have 2 navigations. I want to get rid of the one that is to the right and over my logo. 
    #24876
    scrambler
    Moderator
    Add the rule below in Main Options > Menus > primary menu bar > Menu Bar BG CSS+ box
    {border-top-left-radius:10px;}
    Your second mobile menu at the top right has nothing to do with weaver, so I suspect you have a plugin adding a mobile menu.
    Check all your plugins and deactiavte mobile option
    #24877
    [Deleted User]
    Participant

    Thanks! I am really liking this theme.

    #24878
    Gary_H
    Participant

    I was going to ask how much work was involved in adding the logo to Xtreme, I am thinking I purchase the Plus plugin and future proof the theme 

    Thanks Scrambler and bplumme for this topic..!! 
     
    #24879
    sunrise
    Participant

    I just bought Xtreme Plus!  Awesome!  I am a huge fan of Weaver themes!

    At the top of this thread you said

    simply use the header widget area with two widgets, the logo
    in the left one, and the menu using the extra menu shortcode in the
    second.
    And you could define how they share the site width using the custom widget width option.

    So I added 2 text widgets to the header widget area and inserted the appropriate html and shortcode.  I couldn’t find the “custom widget width option” – that is, I can find that option for the primary widget area, the secondary, the top and the bottom widget areas, but the header widget area isn’t named as belonging to any of these 4. 

    The widget area says “widgets in this area can be displayed horizontally” but it doesn’t say how to make it do that.  So my menu is below my logo, not beside it.  What am I missing?  Thanks!

    #24880
    sunrise
    Participant

    Sorry, never mind – I found it.  The custom stuff for the header widget area is in the header tab, whereas the custom stuff for all the other widget areas is in the sidebars & layout tab…

    I’m still having a little trouble with styling.  The menu text and hover colors are reflecting what is set for links in the Wrapping Area section, rather than what is set for the primary menu.  And there’s a background color for the entire menu that is coming from somewhere I can’t identify.  Also the dropdowns in the submenu don’t display.  This is the shortcode I used in the widget:
    <div  style=”padding-top: 50px;”>[extra_menu menu_name=‘Main Menu’ menu_style=‘primary’ menu_type=‘horizontal’]</div>

    The issue can be found at http://ca3.windshiftdesign.com/.&nbsp; Thanks!

    #24881
    scrambler
    Moderator

    If you want a styled menu bar, you need to use standard for the  menu_type option. Also becarefull it looks like your quote are not symmetrical, and I think you don’t need them anyway

    <div  style=”padding-top: 50px;”>[extra_menu menu_name='Main Menu' menu_style='primary' menu_type='standard']</div>

    #24882
    sunrise
    Participant

    I’m afraid I don’t know what you mean by not symmetrical and your line of code looks identical to mine, but oddly enough, I cut and paste your line of code into the widget (after making sure it was plain text) and the menu disappeared and was replaced by a Search icon in the content area.  I’m sure there’s a good reason for that but I’m at a loss as to what it is!

    #24883
    sunrise
    Participant

    I copied and paste the original shortcode out of the + Xtreme Plus tab (under Appearance) and then just set the values I needed.  So any anomalies with the quotes came from there.  Oddly, it’s only when I use this version that the menu actually displays.  If I use your version or type it in manually the menu disappears.  When the menu is visible, making the menu-type standard or horizontal makes no difference.

    Also, how do I get rid of the Search box in the content area?  It just appeared suddenly and the “show search box” checkbox in the info bar area is not checked, and the info bar is set to hide on all devices.

    #24884
    Gillian
    Participant

    I know you said the search box has appeared in the content but it is actually in the header.  To get rid of it, go to:

    Main Options > Header > Header Area > Hide Search on Header
Viewing 16 posts - 1 through 16 (of 23 total)
  • You must be logged in to reply to this topic.