keeping the menu, heeaders and titles in line when shrinking the page

Hello, are you using a negative margin on your sections? If yes, remove them and check if it works.

i do not think that it is the sections that are becoming jumbled, I am referring to the menu, transparent header and title that get out of alignment when shrinking the page. I wish I could send you a screenshot, if that would help? but I do not know how..
DOes this change anything in your instruction, perhaps? Sorry if I am not being clear.

Oh, do you mean that you want your logo and navigation side by side, right?
Try this css code:

#site-header-inner {
    width: 100%;
}

hopefully i can explain – look at the home pg, when you begin to shrink the window 2 things happen:
1.the transparent header overlaps with the words “san francisco acupuncture”
2.the menu breaks into two lines – which doesnt look professional, before it collapses into a sandwich effect for mobile. is it possible to keep the menu spelled out and in the same line before collapsing into the mobile sandwich menu style?

thanks again

Hi, can you show me a little video of the problem because when I scroll, there is nothing wrong, what I see is just the navigation under the logo and with the code I send you that fix this problem. I see nothing else wrong.

i would be happy but i have no idea how to send you an attachment on this forum. could you please assist and tell me how?

Lydia,

1) Store the link to the screenshot or video in a public site, like Google Drive
2) Get a shareable link for the screenshot
3) When you post to the OceanWP forum, click the underscored link button above where you’re writing your message or reply
4) Paste the link to the screenshot in the URL field

That’s it.

thank you for your help.

I provided a video of the issue.
The header overlaps the title as you shrink the window and the menu breaks into two lines too quickly.

I am fine with the sandwich menu when you reach a certain smaller window size(when shrinking the window) but would like to see the menu remain spelled out, but not broken into two lines, as you shrink the window.
Just to clarify, I do not want to make a change that switches the menu into sandwich mode when one immediately begins to shrink the browser window.
I hope this makes sense, thanks again.

https://drive.google.com/file/d/15DNs514vm27NTgRkYA01BiXW9BSuH71m/view?usp=sharing

• This reply was modified 6 years, 10 months ago by lydiaakhzar.

Hello, if you want your logo and menu side by side, you need to reduce your logo size and remove some links in your menu because you have too much links, this is why the menu is under the logo.

hello, did the video get to you?

I am not asking for the logo and menu to be side by side – this is not my concern.
please review the video, did it make sense?

I see now that my title to this thread is misleading. hopefully my text within this thread and video can explain.

Hello, I don’t speak English so it is a little hard to understand the video but I think it is good now ??
And it is the exact same thing, you need to remove some menu item in your navigation because there is no other way to always make it one line when you resize your browser.

Ok, I see. And can you please tell me how I can manage the transparent header so that it does not cover the title “San Francisco Acupuncture” when I start shrinking the page?

oop, you can forget the last question, I figured it out. Merci!