Some questions re: the Menu Bar

Hey,

Apologies if this should be a series of multiple topics, but I figured these questions are all about the menu/nav bar. Anyway, I’d be grateful for any guidance or advice that can be thrown my way.

I’m trying to get my page from where it currently is (screenshot 1), to where I’d like to be (screenshot 2). So I was wondering:

— Is there any way to change the typeface colour of the page links without changing the colour of any other links on the site?

— Is there also a way to align the page links to the centre of the navigation bar, rather than aligned to the right, like it currently is?

Also, I’d also like to have a transparent navigation bar (without the logo), which then becomes visible once scrolled passed a certain point on the page. Is this something that can be accomplished relatively easy with CSS, or would I be looking at hiring a developer?

Thanks! :smiley:

Also (and because I just discovered this website today), by “transparent navigation bar”, I mean something like this: https://www.opx.co.uk/ except the logo isn’t visible until the bar appears.

I managed to solve the first question by modifying the ‘.menu’ colour in the ‘Navigation’ section.

Still working on the second question, but the closest I’ve came so far is to modify the padding of ‘.module.widget-handle’ to ‘160px’, but I’m unsure how this will look on other sized monitors so I’m trying to come up with a better solution.

Also, for some reason my menu bar only drops down half way when I’m previewing the page.

Hi @dcurry,

I hope you are well today and thank you for your questions.

— Is there also a way to align the page links to the centre of the navigation bar, rather than aligned to the right, like it currently is?

Also, I’d also like to have a transparent navigation bar (without the logo), which then becomes visible once scrolled passed a certain point on the page. Is this something that can be accomplished relatively easy with CSS, or would I be looking at hiring a developer?

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (min-width: 992px){
#site-navigation .module-group.right {
    display: table !important;
    margin: 0 auto;
}
nav#site-navigation{
  background: transparent;
}
#site-navigation .module.left{
  display: none;
}
nav#site-navigation.main-navigation.fixed {
  background: #fff;
}
#site-navigation.fixed .module.left{
  display: block;
}
}
Also, for some reason my menu bar only drops down half way when I’m previewing the page.

Could you please share me the page URL from your site where it is not displaying correctly so that i can troubleshoot it?

Best Regards,
Movin

Hello @Movin

It appears that when trying to map the domain I had bought, I have somehow broken my website by changing the address URL in the settings. Have you any idea what may be wrong?

You can change that address URL in the settings by using the solutions posted in the following pages.

https://codex.wordpress.org/Changing_The_Site_URL
http://www.hostdime.com/resources/change-wordpress-site-url-via-phpmyadmin/