Page Title, Site Navigation Bar and Widget Titles

dahkknox · Member · Dec 12, 2015 at 9:37 pm
Copy link

Add topic to favorites
Hello,
I have only been using WordPress.com for about 2 weeks and am on my second theme (Suits.) I am frustrated with the text formatting options in the customizer, as they resize body text nicely, but title text is then too large.

I have 4 formatting issues that I am hoping to get CSS assistance with:

1. With the size of the text, the Page Title is way to large for the area. I need to resize, change alignment or widen my page.

2. I would like all of my page links on the navigation bar to be on one line and remove the search box.

3. My widget title are too large and are “breaking” the middle of the word to the next line, they need to be made smaller.

4. I would also like to change the color of the word “search” and make it bold in the Search widget.

The blog is: thewatchmansentinel.org

Thank you in advance for your assistance.

The blog I need help with is: (visible only to logged in users)
dahkknox · Member · Dec 13, 2015 at 3:46 am
Copy link
Hello Again,
I answered a few of my own questions after my previous post so here are my remaining questions:

1. I would like all of my page links on the navigation bar to be on one line and remove the search box.

4. I would also like to change the color of the word “search” and make it bold in the Search widget.

Thanks again.

The blog I need help with is thewatchmansentinel.org.
thesacredpath · Member · Dec 15, 2015 at 7:21 am
Copy link
Hi there,

1. I would like all of my page links on the navigation bar to be on one line and remove the search box.

We can extend the menu to full width, but even with doing that, your menu will be on two lines due to the number of top level menu items you have. You can give the following a try, but even going full width and removing a lot of the padding between menu items, it still isn’t enough.
```
.main-navigation {
    max-width: 90%;
}
.nav-menu li a {
    padding-left: 0.5em;
    padding-right: 0.5em;
}
```
I don’t recommend the above as the menu items would be too close together and difficult to navigate, and besides that, it doesn’t achieve what you were wanting. In addition, Suits is a responsive width theme, so if someone comes to your site and their browser window is narrower than the max width of the content area, they may well still see two, or possibly three lines in your menu.

My suggestion would be to look at your top level menu items and see if you can combine any of them into submenus, such as you have done with Reference Resources.
thesacredpath · Member · Dec 15, 2015 at 7:24 am
Copy link
This will remove the search box.
```
.main-navigation .search-form {
    display: none;
}
```
I don’t see a search widget on your site right now.
dahkknox · Member · Dec 16, 2015 at 1:16 am
Copy link
Thank you for answering my questions and for the suggestions.

I did have one more question: If I were to remove the search box from the navigation bar and use the search widget instead, how would I go about changing the color and darkness of the word “search” in the widget?

Thank you.
thesacredpath · Member · Dec 16, 2015 at 9:05 pm
Copy link
Hi, we can use the following to change the search widget placeholder text color and make it bold. you can edit the color codes as desired. We need to have all four of these rules because we have to tell each browser. There are two for “moz” because the two of them cover different versions of Firefox.
```
::-webkit-input-placeholder {
    color: #cc0000;
    font-weight: bold;
}
:-moz-placeholder {
    color: #cc0000;
    font-weight: bold;
}
::-moz-placeholder {
    color: #cc0000;
    font-weight: bold;
}
:-ms-input-placeholder {
    color: #cc0000;
    font-weight: bold;
}
```
dahkknox · Member · Dec 17, 2015 at 4:45 am
Copy link
Thank you.
thesacredpath · Member · Dec 17, 2015 at 8:48 am
Copy link
You are welcome.

No items found.