This topic contains 23 replies, has 2 voices, and was last updated by  Hans (Support Admin) 1 month ago.

Issue with the Menu /Menu goes below the Header section

  • Hi Hans,

    I added a logo to my website and you advised to add a css code to make it work as I wanted

    .navbar-default{height:70px;} in custom code section.

    However this causes the following issues:

    1. when you make a change of the size of the window the menu is going below the menu header section making the whole website experience really bad
    2. also this change causing that the menu on the mobile displays with transparent background – where it should be white to distinct the menu from the rest of the website. also similar bad experience

    Please advise how to solve these topics?

    Thanks
    L.

    @lech

    Can you link to your website so I can have a look?

    If you set a fixed height you will also have to set another height for mobile devices.

    You can add the same CSS code to the Media Queries at the bottom of the style.css file.

    Around line 1735 you will see this,

    @media (max-width: 767px)

    You can then specify a different height for mobile devices.

    Here is a list of Media Queries and what devices they correspond to,

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {

    }

    This reply has been marked as private.

    Hi Hans,

    The size of the logo is fine for me for all devices. The issue is with main menu going below the menu header section. Additonally on the mobile display the menu is transparent – where it should be white to distinct the menu from the rest of the website. I can send you some pictures if you want for better view.

    Regards
    Lech

    Hi Lech,

    I think this will fix your issue.

    Add this to the bottom of your style.css file.

    @media only screen and (max-width : 768px) {

    .navbar-default {height: auto;}

    }

    Hi Hans,

    I did include as you suggested and it helped a little bit but did not solved.

    When I am playing manually with the size – width of the of the window, still menu may go below the top section.

    Also, the menu in smaller sizes does not have a white background (it is transparent and going below the top section, which is probably fine, but still transparent)

    Thanks,

    Lech

    @lech

    Can you take a screenshot to show me what you mean? Because I am not clear on what the issue is.

    Hi Hans,

    I just sent you with dropbox

    I hope this will be helpful

    Regards
    Lech

    Hi Lech,

    Here is a screenshot I took, https://www.dropbox.com/s/d6sjrl6oho1bh9z/integral-menu-mobile.PNG?dl=0

    Is that what you are referring to?

    Reducing the size of your browser is a good way to test mobile responsiveness but it isn’t perfect.

    You should test on various devices (mobile phone, tablet, etc.)

    But there is a certain break-point where the mobile menu kicks in.

    That is part of the Bootstrap Framework with which Integral is built.

    This highly depends on how many menu items you have.

    Hi Hans

    Have you seen the pictures on dropbox? I think I approved recently your access. I am not sure where your pciture is coming from.

    The bahaviour I described (menu with transparent background going below the logo) on the mobile was tested on the mobile device. If the menu was not transparent, but white like in your template then I would consider this done.

    Regards
    Lech

    Hi Lech,

    Yes I did.

    The reason for that is because of the CSS change you made so that the logo goes outside the header area.

    This was the CSS code I said you should add to the Custom CSS field located in Integral Options > Custom Code section.

    Now we must adjust for mobile devices, so please add this as well.

    @media only screen and (max-width : 992px) {

    .navbar-default {height: auto !important;}

    }

    I have tested it on my end, that should fix your issue.

    Thanks Hans, this solved my problem

    Cheers
    Lech

    Hi Hans,

    I tested a little bit longer and noticed the following:
    1. when you click menu on mobile, you select for example “O Psychoterapii” then the web site is going to the target site but, the menu is still open. can this close automatically after the selection? Please note that I have sub-menus as well.

    2. When I go to “Uslugi” then and select any subpage – this is shown without the main title of that sub-page. – it looks like a logo with wider top menu section overlapping the top section with the title of the subpage . On big screens it is showed properly, but on mobile, not really

    Regards,
    Lech

    Hi Lech,

    #1 – Unfortunately not, because of the various features working together (sticky nav, one page site, scroll down, etc).

    #2 – Yes, if your logo is large and expands the height of the header you will experience this issue. However you can adjust it with CSS.

    Hi Hans

    Regarding #2 raised earlier. As you may remember my logo is going below the standard header, in order to have the same experience of the website and mobile device I added extra lines in css code (full width page). I used below code:

    <br />
    <br />
    <br />

    But now it looks fine on mobile (the title of the subpage is just below the logo), however on the standard PC the text is far below the logo which does not look good.

    Also, when I am viewing the subpages on mobile devices the picture is not scaling well, it does not look like centered, and left side (not too much) is hidden

    Could you please advise with these? (btw: I am very close to the end:))

You must be logged in to reply to this topic.