How to change background color for the main menu in Pique theme

persmatte · Member · Jul 28, 2016 at 2:08 pm
Copy link

Add topic to favorites
I’d like to change the background color of my main menu when you scroll down the page and it gets fixed at the top of the screen.

Also, the width of the page doesn’t cover the screen when viewing from a desktop pc or laptop. I have set the panel template to full width.

Last one, I don’t want the panel title to have a frame around it. Can this be removed?

Thanks in advance

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Jul 28, 2016 at 3:32 pm
Copy link
Here’s the code you need to change the menu background colour, add it into the CSS section of the customiser below your existing rule:
```
.main-navigation {
	background-color: #6E6E6E;
	border: none;
}
```
Full width pages generally just don’t show the sidebar so your content can take up the whole width of the theme. For Pique that’s 1400 pixels. I’ve had a play around with using CSS to expand this but it’s not looking great. I’d suggest leaving it as it is just because once a line of text reaches a certain number of characters it becomes more of an effort to read, and you don’t want your visitors to find reading your textual content uncomfortable.

Panel title borders are easier! Give this a shot:
```
.pique-panel-content h2 {
	border: none;
}
.pique-panel-content h2::before,
.pique-panel-content h2::after {
	display: none;
}
```
persmatte · Member · Jul 31, 2016 at 12:32 pm
Copy link
thanks for the CSS codes that worked fine.

appreciate if you can write a code to also change fonts and upper case to lower case for headings (panels and main page)?

I also struggle to get a widget for email including icon to appear or/and work as it should. please help.

regards,
Mattias
hallluke · Member · Jul 31, 2016 at 12:44 pm
Copy link
Hi Mattias,

This CSS will put the navigation menu, panel headings and widget headings into title case:
```
.pique-panel-content h2,
.main-navigation a,
.widget-title {
	text-transform: capitalize;
}
```
Did you try the follow blog widget, that’s the one I’d suggest using.

No items found.