Support Center Visit Demo License manager Buy @ envato

Setup for Header / Menu Style

dq-8dq-8
in Theme support
Hi BeTheme Team.

My Client want a complete change of his current Layout, so i start today to release his wishes. To explain it in a better way i upload two screenshots with my actuall tryed setting and how my client wants to look it after the update.

My actuall (test) layout (image 1):

http://www.bilder-upload.eu/show.php?file=075c98-1478084060.jpg

Layout the client wishes in the finished Version (Image 2):

http://www.bilder-upload.eu/show.php?file=b17b7f-1478084132.jpg

In the new Layout i use the stack Header with the navigation on the left side. Also i use the Actionbar.

1. my client want the elements of the logo, navigation and text in the topbar in a fixed (boxed width) and the Background color of the elements in full width.
2. than he want the bg color of the action bar and the color of the logo bg in the same color
3. the bg of the navigation he want in a other color (white)
4. the text of the topbar he want on the right side (is their a setting in the theme options or must i modify it via custom css?)
5. Maybe is it possible to use custom links in the topbar (with icons like the image 2) not only telephone and email. can i put shortcodes in the textfield, where the slogan is in the demo?

the problem to release the "new" header layout is at the moment that i see the stacked layout of the header make the logo section in full width of the content width (in a seperate container) and use the same container than the navigation, so this two elements have the same background color. so if i change the bg color of this element the navigation and the logo have the same color (boxed) and the rest of the display width have the bg color of the theme settings

how can i split this that the bg of the logo (in full width) and the navigation (full width) have different colors and have a boxed layout (same than image 2). are their settings for this setup, or have you any idea to release it so?

thx for help and support.

regards tom

Comments

  • AlbertAlbert
    Hi,

    We are sorry but what you ask for, requires many customizations what in reference to Item Support Policy is not allowed. You should contact with web developer.

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    Okay,

    i solve it i a other way. after i setup the header as stacked with navigation position left, i see that the navigation button for displays between 768 and 1240px width moved under the logo on the left side. on smartphones the navigation goes back to the right side beacuse in this width you can controll the position of logo, search and navigation in the responsive settings.

    i attach a screenshot how it looks. i think it will be nice or/and logical if you add a option to settimgs under responsive where you can choose the position of the "hamburger" navigation for small displays tablet, etc.

    http://www.bilder-upload.eu/show.php?file=1e25f1-1478621725.png

    maybe is there a easy css string to move the navigation button for displaysizes from 768 > 1240 to the right side and on the same horizional height? on other header settups you have the menubutton allways on the left side (on displaysizes < 1240 )

    a second question: is their a option in the settings to hide only the social buttons in the footer section? I only found the option for copyright and social link (default, centered, and hide). i want the copyrights centered without social icons. if their is not such a option have you a css string for me that solve it?

    thx for help tom

     
  • AlbertAlbert
    Thanks for your suggestions. We may consider it when we will get more requests about it and when we finish features and fixes that currently await in queue. Please understand that we can not add any feature you just want because lot’s of users uses poor hosting services and more options/features means higher server requirements. So if we will do necessary tests and decide that it does not charge server resources to much, then we will consider adding it of course.

    If you will send us link to page where you would like to move the navigation on screens between 768 and 1240 and we will see if it's possible.

    In reference to your 2nd question, we do not have any option to remove social icons from footer but you can remove it easily with custom css: 
    #Footer .footer_copy .social { display: none !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    hi and thx for answer.

    1. yes i understand but in case of the stacked menu navigation under 1240 width (with menu on the left side) it looks strange (specially on tables or laptops with display size 10" oder 12") because in this display resolution the minify of the navigations starts from text to the menu button .

    Maybe the easiest way is to change the options from the settings "responsive>header>mobile options" from <768 to <1240px. that you can change the settings under the minimal header for all displays less than 1240px.

    2. thanks a lot, that's what i need :)

    regards tom
  • AlbertAlbert
    1. If changing it that way is good enough for your needs, then you can do this of course because we do not have any other solution. Of course if you send us link to page where you would like to change it's look on smaller devices, we may have a look on it but we can not guarantee that we would be able to help you.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    Hi,

    in your changelogs for version 15.5 (actuall i use 15.6) you make changes for fix the stack header menu on mobile devices. is this change only for sticky header or also for the stack menu if you are at the beginning/top of the page.

    have i ignore a setting for mobile headers (between 768 and 1239)?

    i try some changes and i find out that this following string help me to move the icon menu to the left side (if i use stack menu) and it looks right

    @media only screen and (min-width: 1239px)  {

    .header-stack .menu_wrapper a.responsive-menu-toggle {
        position: static !important; (must change in absolute)
        margin: 11px 0 !important; (must change to margin 0)
            margin-top: 11px;
            margin-right: 0px;
            margin-bottom: 11px;
            margin-left: 0px;
    }
    }

    is is how the layout acutall looks

    http://www.bilder-upload.eu/show.php?file=155a4d-1479503327.jpg

    and this is how it change if i delete the css options in the firefox editor (and i want)

    http://www.bilder-upload.eu/show.php?file=0dbd8a-1479503458.jpg

    problem is in the css inspector i can make the changes (delete the options below) but if i wrote this string with the new settings in the advance css section of the theme options nothing happens.

    do i something wrong?

    thanks for help tom
  • AlbertAlbert
    We are sorry but we completely do not understand your question. What exactly you want to do? And what's the link of page where you would like to modify header?
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    edited November 2016
    hi.

    the two links (with the picture) are a screenshot of the new page layout.

    Picture No. One is how it looks if i use stack Menu and and is the layout on a tablet / small pc (768 > 1239px)

    picture no. two is how i want to change the layout for this devices (menu button on the right side and logo on the left). nearlly the same than the layout on mobile devices.

    now the page is installed on a server and i can provide a link to the page

    http://sportbootschule-christians.de.w0152f07.kasserver.com/

    if you now resize the browser window to less than 1239px you see want i mean. the only thing i wnat ist that if the screensize is less than 1239px the menu got to the right side and the line in the full desktop layout goes away. also the navigation section where the menu button is at the moment (under the logo)

    in this case i have a question to your last update 15.7. in yourt changelogs your write: 
    Improved: Menu Button - New more visible option for all header styles
      (please set this color after update if you use Header Overlay Menu)
    but i can't find this options. under which settings option are they? sorry if i oversee it.

    thy for support tom
  • AlbertAlbert
    Ok, got it. So to make same header as you presented on 2nd screenshot above, you need to use the following custom css: 
    @media only screen and (min-width: 768px) and (max-width: 1239px) {
        #Top_bar .menu_wrapper {
            position: absolute !important;
            right: 0px !important;
            top: 30px !important;
        }
        #Top_bar #menu {
            left: -250px !important;
        }
    }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    Hi.

    Thx for the fast Answer.

    1. can you explain me what your team mean with

    Improved: Menu Button - New more visible option for all header styles
      (please set this color after update if you use Header Overlay Menu)

    i can't find extra settings, or does i oversee anything?

    2. after i update to version 15.7 all header images from the single pages doesn't displayed anymore and the complete content moves under the logo. maybe you see it as you have visit the link to the page. here are one example

    http://sportbootschule-christians.de.w0152f07.kasserver.com/knotenkunde/

    thx for help tom
  • AlbertAlbert
    1. It means that we added new options for menu buttons under Theme options > Colors > Menu & Action Bar > Menu Button section.

    2. May we know where did you set those images? Because as we can see, you do not have them even in the code and we didn't changed anything related to header's background.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    edited November 2016
    1. okay, ist's only for color and not for layout (position). thx :)

    2. i have set it in the single pages under media > header images (this section where you can also choose the slider). before i update it works in the 15.6 version. The custom css code is okay

    i add a user so you can see want i have change (translation is german) pages = seiten / view = anschauen / edit = bearbeiten

    login infos:

    *** REMOVED BECAUSE OF SECURITY REASONS ***

    thx for take a look and regards tom
  • AlbertAlbert
    To send us access, please do not use forum. To send us access, please always use contact form on the right at https://themeforest.net/user/muffingroup#contact
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    oh sorry,

    i mean that this post settings are privat. i send you an email with the needed infos

    thx tom
  • dq-8dq-8
    Hi have you good my Mail via your contact form?

    regards tom
  • AlbertAlbert
    Yes, we get it and we replied on it on 1st December at 4:21PM so we suggest to check your inbox.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    hello.

    i check all my mail accounts inclusive spam. but im sorry to say it doesn't arrive. is it possible to send it again? :( and is it possible to get a mail reminder if you write here in this support form?

    thx and a nice day tom
  • AlbertAlbert
    edited December 2016
    We re-sent the message this morning.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dq-8dq-8
    thx, today i get it. meanwhile i find the problem (disable a wrong option).

    thx for support
Sign In or Register to comment.