Need help with moving the menu to the left and more

Hi Ankur,

You can achieve what you’re after with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. As you already have Jetpack installed then a straightforward option if you to activate its custom CSS module.

1. The location of drop-down menu (Topics) to the center

The following snippet would bring the menu nearer to the centre of your screen:

#site-navigation {
        text-align: left;
}

@media only screen and (min-width: 1040px) {
    .site-branding {
        width: 50%;
    }
}

2. I would also like to change the font of this drop-down menu and make it bold

The following CSS should do the trick and make the links in your dropdown menu bold:

#site-navigation a {
    font-weight: bold;
}

3. If you look at the site on a desktop/laptop then there is a white blank space coming right below the banner/header image above the posts. I want to get rid of it but don’t know how to do it.

Have you installed a plugin to keep the top header of your site stuck to the top? I believe it may be causing that some extra padding to be added to the top of your posts.

Dyad’s header is stuck to the top, by default, and so I recommend deactivating your plugin to see if the header still works as you intend it to.

If you want to workaround the plugin, then the following CSS will remove the extra spacing:

.is-singular:not(.home):not(.single-format-image) .site-content, .is-singular:not(.home).single-format-image:not(.has-post-thumbnail) .site-content {
    padding-top: 0 !important;
}

Please note: The use of the !important command is not considered good practice in CSS but, in this case, it’s necessary to override some inline styling.

Hope the above helps out!

Thanks so much for helping this poor soul Siobhan ??

For my point no. 3, I had “sticky menu (or anything) activated and once I deactivated it worked fine. However, the navigation bar which overlaps the header image is not sticky by default as you had mentioned. Is there any way I can achieve it?

Cheers!!
Ankur

Hi Ankur,

I’ve created a screencast of me scrolling down your site here. You’ll see that the navigation bar remains at the very top of the site as I scroll:

Is the above different from the behaviour you’re seeing? If so, let me know what browser you’re viewing your site on.

If you are seeing the behaviour in the above screencast but were referring to something different by “sticky menu” then let me know too.

That’s strange because I want it exactly the way it is showing at your end but It’s not the same at my end. I’m using Chrome mostly but checked this on Microsoft edge browser too. Navigation bar on my site is not sticky since the day 1.

Hello Siobhan,

Hope you had a great weekend. ??

I have somehow found a weird thing that is happening with my website and especially with the navigation bar. While working on my site I accidently reduced the size of Chrome browser to 90% and noticed that the navigation bar is sticky as you had mentioned. However, when I resize the browser back to 100% the navigation bar is not sticky again. What could be a possible reason for this and what is the easiest solution?

Cheers and have a great week ahead.

Ankur

Hi Ankur,

I hope you had a wonderful weekend, also! ??

I did a little bit of digging and (prompted by your note about the menu’s behaviour after zooming into your site) I found that the navigation bar is only sticky on devices that are 1400px in width or larger. If you’re viewing your site on a laptop that’s smaller, then the menu will not stick to the top of your site.

It’s a good idea for the menu to stop being sticky at a certain point as the behaviour wouldn’t work well with touch screen devices.

That said, you can use some custom CSS to reduce the size that the menu stops being sticky at.

The following snippet makes use of a media query to keep your menu sticky up until the browser detects a screen is less that 1200px in width:

@media only screen and (min-width: 1200px) {
    .site-header, .admin-bar .site-header, .admin-bar.is-singular .site-header {
        position: fixed;
    }
}

You can increase/decrease the min-width to your liking.

Hope that helps out! Let me know how it goes.

I have one final issue. I’m unable to find the best way to show how grateful I’m to you for solving all my problems.

You’ve been super awesome Siobhan and all my issues are resolved.

Cheers..!!
Ankur

You’re most welcome, Ankur! I’m so glad that I was able to help you out. ??

You know where to find us if extra questions come up, too!