[Lydia]

Hi,

I have a couple of questions regarding the layout customization.
My website is here http://box5684.temp.domains/~johnspo3/sample-page/
I need to:
1. Reduce the top/bottom margin for my Website Title section – make it narrower;
2. “Spread” the top menu options (justify), or to increase the space between the menu options.

Thank you,

[sapana]

@olgasyracusegmail-com: It seems that your site is not live yet let me know as soon as it is live so that I can look into those issues.

Kind Regards,
Sapana

[Lydia]

Yes, the site is in a test mode, it is a stage site. we are currently running another site with the same domain name on a different hosting. I can’t go live with my stage site to make it available to you. Is there any other way,for example to use an IP address so you cold see it?

If you can’t see the website, I will try to explain what I need to customize.
1. There is a fixed Site Title and Tagline shown between the main menu and the sliders – I used your custom CSS code from the previous posts to make it available. I need to make the Title/Tag line (fixed-header?) a little bit narrower, to reduce the white space above and below the text – without changing the fond size. Also I have a logo image there before Title/tag line, so if you have built-in margin around logo image, it could also affect the width of this section.
2. In my Primary menu (at the very top of the page) – I have a few menu options that are aligned to the right by default. I want to make them “spread” more evenly, so there is more space between the menu options.
Alternatively I could have the loge shown on the left and align my menu elements to the right – as it is done on your website (catch cheme logo is on the left and Home-…-Blog-My Account links are aligned to the right.

Hope my explanation is sufficient enough.

[Lydia]

There bis a typo I just noticed –
…I have a few menu options that are aligned to the LEFT by default…

[Lydia]

OK, I found a solution for a desktop layout

#site-branding {
padding-top: 5px;
Padding-bottom: 5px;
}

And separately for tablet/mobile layout:

#masthead {
padding-top: 5px;
padding-bottom: 5px;
}

It seems to be working. Is there any mistake that I haven’t noticed yet?

Thanks

[sapana]

@olgasyracusegmail-com: your code is working fine in mine side too, But I think padding-bottom have no any changes in mine so I exclude it. let me know if you have any other issue.

Kind Regards,
Sapana

[Lydia]

Padding-bottom does work for me – I have a logo image which is wider than a title/tag line so it is easy to see for desktop. I test the code in Chrome and Firefox (Windows) for desktop, tablet and mobile layouts.
In mobile version padding-bottom would apply to the title line, since the logo is located above the title line.
It works like a magic, so I am keeping it. But thank you for the idea to test it more thoroughly in mobile browsers before I go live. They may show it differently sometimes.

Olga

[sapana]

@olgasyracusegmail-com: Glad to know that you figure it out issue and let me know if you have any difficulty.

Kind Regards,
Sapana

[Author]

Posts