Help with top menu bar with the photo under it on a responsive screen

Home › Forums › Porto – Responsive HTML5 Template › Help with top menu bar with the photo under it on a responsive screen

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 9, 2026 at 5:51 am #10046047
    sandyms
    Participant

    On the website page I provided, I am struggling with the large top photo that goes under the top floating menu.

    It looks fantastic on a larger screen and works perfectly on the cell phone size.

    But if you turn your cell phone sideways, the photo and words go under the top menu too much. Can you help me please?


    Template Version: 13.0.0
    January 9, 2026 at 6:37 am #10046048
    sandyms
    Participant

    I should add that if you go to another page (try Membership.html or policy.html), the static type menu at the top has some space on the left.

    It shouldn’t have any spacing on the left or right but just go across.

    January 9, 2026 at 11:55 pm #10046049
    Support
    Keymaster

    Hello, you can fix that adding bg opacity on mobile and landscape orientation, adding this:

    (css/custom.css)

    @media (orientation: landscape) and (max-width: 991px) {
	html:not(.sticky-header-active) #header.header-floating-bar .header-body {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}
}

    Another way to change the position of elements for that specific case would be:

    @media (orientation: landscape) and (max-width: 991px) {
	.custom-margin-1 {
		margin-top: 40px !important;
	}
}

    So adding custom-margin-1 class in the elements you want to move down would add margin top to those elements.

    Also, to remove the space on membership page just add the class “right-0” on header-body div

    <div class="header-body bg-color-dark box-shadow-none right-0">

    Hope that helps.

    Kind Regards.

    January 10, 2026 at 1:48 am #10046050
    sandyms
    Participant

    We are close!

    I made this messy probably but I was able to get the other pages to get rid of the left side space with your right=0 AND I added mt-0 pt-0. I wanted to have this tight at the top instead of seeing the page above the header when scrolling. It seems to work.

    As for the other with turning the phone and the photo / text issue.
    This is specific for the index page (the one I sent you the link).
    The 40 px work with a specific custom tag and your code in the custom.css so that’s great!

    But, I need the other code to only be for this page because if it is added as you sent it, it goes on all pages and makes the top header transparent which can only happen on the home page.

    So – can you help me make your custom code be for only the index page?

    @media (orientation: landscape) and (max-width: 991px) {
    html:not(.sticky-header-active) #header.header-floating-bar .header-body {
    background-color: rgba(0, 0, 0, 0.4) !important;
    }
    }

    January 10, 2026 at 3:54 am #10046051
    Support
    Keymaster

    Hi, for that you can add the class “home” in the HTML tag on index only and change the css to this:

    <html lang="en" class="home sticky-header-reveal">
    @media (orientation: landscape) and (max-width: 991px) {
	html.home:not(.sticky-header-active) #header.header-floating-bar .header-body {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}
}
    January 10, 2026 at 4:11 am #10046052
    sandyms
    Participant

    Perfect. Exactly what I needed. Thank you!

    I was trying this on my own but I didnt know where to place that class on the home page.

    You are awesome!

    Have a nice day!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

This topic is marked as "RESOLVED" and can not rceive new replies.