Propulsion Main menu, Social Media icons, divider flag « Support Forum | Kriesi.at

Support Forum » Propulsion

Propulsion Main menu, Social Media icons, divider flag

6 posts from 3 voices

Started 6 months ago by pixelist
Latest reply from Devin
This topic is not resolved

Tags:

pixelist
Member

Hi
Firstly I want to just thank you guys for responding to my previous questions - your support is better than BT's they could learn a thing or two from your company. I hopefully, only have a few more questions.

Is there a way to:-

1. Put a single or seperate block or band of colour behind the main menu items.

2. Take the transparency off the social media buttons.

3. Change the colour of the white block that sits to the right behind the flag divider rule (so it doesn't show up if I change the content background colour).

regards

Pixelist

Posted 6 months ago #
Ismael
Moderator
Hi,

You can do the following

1.) To create a background color on the menus you can add this code on your custom.css
```
#menu-main-menu li {
background: red;
}
```
2.) If you want to take out transparency of the social icons, you need to edit the icons directly which are located on propulsion/images/layout folder.

3.) To change the diamond on the flag, just make the color same with the background color
```
.flag-diamond.site-background {
background: red!important;
}
```
Regards,
Ismael
Posted 6 months ago #
pixelist
Member

Thanks Ismael

It has worked, but it's turned the dropdown menu background to red as well - is it possible to to leave this as it was (default colour) and just the strip behind the menu in red?

Also how do I get the strip to extend to the right edge of the site?

http://aclgroup.co.uk/wordpress/

regards

Pixelist

Posted 6 months ago #

Ismael
Moderator

Hi pixelist,

This code on your Quick CSS is responsible for the background color of your menu:

.main_menu {
    top: 20px;
    background: red;
    height: 20px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#f50019), to(#a10013));
background-image: -webkit-linear-gradient(top, #f50019, #a10013);
background-image: -moz-linear-gradient(top, #f50019, #a10013);
background-image: -ms-linear-gradient(top, #f50019, #a10013);
background-image: -o-linear-gradient(top, #f50019, #a10013);
background-image: linear-gradient(top, #f50019, #a10013);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 2px 5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0px 5px 5px rgba(0, 0, 0, 0.2);
}

I'm also not sure what you mean by strip? The propulsion theme by default doesn't have any background at all on its menu.

Regards,
Ismael

Posted 6 months ago #

pixelist
Member

Hi Ismael

Thanks for your reply

The strip i was referring to was the rounded block of colour behind the menu, I've managed to get it to extend to the full width of the site. Only thing is It doesn't reduce on tablet 800 x 600 size so it extends past the right hand side of the site. How can i target this in the css?

Also what makes the images reduce? ie the images to the right of the logo don't currently reduce That's fine for tablets but they remain the same size on mobile - can I set their size with css3 somewhere?

regards

Pixelist

Posted 6 months ago #
Devin
Moderator
Hi Pixelist,

It looks like the menu is properly scaling to the browser width now.

For the images, they will scale if the container they are inside scales down. Right now, they just wrap to the next line and nothing is forcing them smaller.

So you could add a new container div to them and then use media queries to shrink them based on the users screen size or just have them removed for mobile since shrinking them would make it pretty hard to read. IE, something like this:
```
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) { #top .header-ads{display:none; } }
```
where header-ads is the new div class you'll wrap the images inside.

Regards,

Devin
Posted 6 months ago #