• Tomas

    (@tomas-valverde)


    Hello, I created a Nav menu on My Library and it appeared on my site, but inside my Logo, on it’s upper part. I’d like to move it below the Logo, but I can’t seem to find the settings that would make it so.

    I attempted to make a menu bar appear below the Logo in the Customize section, but it appears in hamburger form, which is what I wouldn’t like to have, I’d like for my visitors to see all the menu without extra clicking. If I could remove the hamburger, it could work also. I don’t think I understand the difference between Logo and Header.

    I found the following code from my site, in case it gives any clue how to fix this in the Custom CSS/JS section:

    /* Header CSS */#site-logo #site-logo-inner,.oceanwp-social-menu .social-menu-inner,#site-header.full_screen-header .menu-bar-inner,.after-header-content .after-header-content-inner{height:200px}#site-navigation-wrap .dropdown-menu >li >a,.oceanwp-mobile-menu-icon a,.mobile-menu-close,.after-header-content-inner >a{line-height:200px}#site-header.has-header-media .overlay-header-media{background-color:rgba(0,0,0,0.5)}</style></head>

    If anyone knows a solution, I’d be thankful. ??

    • This topic was modified 10 months, 2 weeks ago by Tomas.
    • This topic was modified 10 months, 2 weeks ago by Tomas.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hello @tomas-valverde,

    Thank you for reaching out,

    The styling of those elements is not available in the predefined headers.
    But you can create a custom header and order them as you want.
    To customize the header, you can use the custom header.
    Please follow the steps explained in this link: https://docs.oceanwp.org/article/355-how-to-create-a-custom-header.

    I hope it helps.
    Best Regards

    Thread Starter Tomas

    (@tomas-valverde)

    Ah, creating a Custom Header in My Library gave much, much better results!

    I’d still like to create the hovering effect in my menu, but I can’t seem to get it to work. That is, the change of background and/or text color when you move your mouse to a certain part of the menu (i.e. “about” or “archives.”)

    I attempted to use a Custom Menu Widget too, but the problem is there doesn’t seem any other place besides Sidebars and Footers for one to appear. When I set the menu on a Sidebar, the menu won’t appear at the center below Header. There’s Default Sidebar, Left Sidebar and several Footers.

    I attempted to add a couple of photos on this message, but they wouldn’t upload. It said something about “empty attributes.”

    • This reply was modified 10 months, 1 week ago by Tomas. Reason: I attempted to add a couple of photos on this message, but they wouldn't upload. It said something about "empty attributes."

    Hello @tomas-valverde,

    Thank you for reaching out,
    Please provide us with some screenshots or a short video of the errors you faced step by step. Also, please tell us how you would like the section to look like.

    You can upload your files to one of the following online services:
    https://postimages.org
    https://loom.com
    https://drive.google.com
    https://wetransfer.com
    https://dropbox.com

    Please keep us posted.
    Best Regards

    Thread Starter Tomas

    (@tomas-valverde)

    Actually, I decided to not have buttons, just a simple menu created through My Library. Two problems I’d still like to resolve are:

    1#: Not being able to create a drop-down menu for my Approved Resources page. I set it to be the parent page of a few other ones (I’ve succeeded doing it with a previous theme I used), but I don’t know how to do it with OceanWP. As it can be seen on the photo below, no drop-down menu appears with the said Page highlighted.

    2#: Not being able to create more space between the Pages on my Menu. I did try different kind of setting on My Library, but the Pages still remained just the distance of one space bar click from each other. Trying to create distance by hitting the space bar hasn’t worked. On the photo below, I demonstrate what it looks like in My Library (what the result with the spacing of the Pages look like can be observed on the previous photo. I haven’t set the corresponding link for the other Pages, that’s why they’re not underlined on My Library):

    If I had to give an example of a drop-down menu I’d like to create, it can be seen e.g. on the front page of Smart Passive Income (computer version, not the mobile one). A simple box with all the submenus appearing below the Page link when highlighted would be good enough.

    I’ve been able to create more space between my Menu Pages with the free version of Elementor. However, when I turn the plugin off, it’s effects also go away. If I’m not mistaken, having more plugins activated at the same time can slow your site down. I already have Ocean Extra, Akismet, W3 Supercache etc. activated. If I leave Elementor on on top of all the other plugins, do you think it could slow down my site or cause other functional problems?

    Shahin

    (@skalanter)

    Hello @tomas-valverde,

    Thank you for reaching out,

    1. How did you build the menu?
    I can see only one paragraph: https://postimg.cc/6T9FQmy2.
    You must create a new menu from the WP Dashboard > Appearance > Menus. Then, use any widget/block to show that menu on your desired template.

    2. You can add the “no-margin” class to remove the 20px margin-bottom from the widgets/blocks: https://postimg.cc/7CK0nhny.

    3. To build the drop-down styling like the example you’ve shared, you must find a block that provides that feature. You can search the WordPress repository for a plugin to do this: https://www.ads-software.com/plugins/, or you can develop and build a new custom one.

    Note 1: the simple one in the theme is this shortcode: [oceanwp_nav].

    4. Regarding website performance, the settings on each website can be different, and it doesn’t have any performance instructions, so you need to check all settings and troubleshoot the issue you’ve faced or use another plugin, like autoptimize, etc., and test your issue again.

    Note 2: To know about the performance of the website, read and follow the article at this link: https://web.dev/fast/

    I hope it helps.
    Best Regards

    Thread Starter Tomas

    (@tomas-valverde)

    Hello, excuse me for not answering for so long! I didn’t mean to give the impression of first asking for advice and then ghosting. So, I built the Menu currently displayed on my site in My Library in text format, as seen on this picture:

    https://postimg.cc/SnV53XNP

    I did add the no-margin code you suggested, but I still can’t make more space between the Menu page links. On the picture it appears as though there’s added space between them, but when you view the site the links are as close to each other as the words in this sentence I wrote. However, that’s probably due to some kind of misunderstanding on my part.

    I did create a Menu for Widgets, but the problem is there’s only place in the Sidebars and Footers for the Menu to appear. The Menu would appear below my Header on the left or right side of my page , or in the bottom and not in the center like my current Menu built in My Library:

    https://postimg.cc/MvSFG0n4

    Is there any way to place Widgets in or right below the Header, in the center?

    Also, could you tell me how and where exactly would I use the shortcode [oceanwp_nav] , please?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to move Navigation below Logo on Posts and Pages’ is closed to new replies.