need help with mobile spacing between logo and tagline and menu colour

This topic is: Resolved

[Resolved]

This topic has 5 replies, 3 voices, and was last updated 5 years, 11 months ago by Hannah.

April 27, 2020 at 4:41 pm

Hello,

I have a few small issues with my mobile layout, in the header space. The desktop layout and colours are fine, so I do not want it to change.

I have some custom .css that I don’t want to remove completely since the layout of language widget and other items such as contact us are designed and spaced fine as they are:

/* TOPBAR */

.headerclass {

}

.topbarmenu ul li a {
padding: 10px 30px;
font-size: 14px;
}
.topbarmenu ul li a {
font-size: 18px;
font-family: lato;
font-weight: 600;
}

.topbarmenu ul li a {
color: yellow;
}

#topbar ul.sf-menu > li > a:hover {
color: #ffcc66;
}

.col-md-6.col-sm-6.kad-topbar-left {
width: 25%;
}
.col-md-6.col-sm-6.kad-topbar-right {
width: 75%;
}

The issues are:

1) My Site Tagline – Below Logo is too close to my logo and it takes more than one line but I don’t want too much space between the tagline’s 2 lines. Unless the only choice is to reduce my tagline font size.

2) I would to change my secondary menu background colour(I don’t use the primary menu), can’t remember where this setting is exactly?

3) Here is a previous topic that resolved my logo being to small-see last posts; I followed this specific advice and the logo is wide enough but I would like it to be a bit higher around 5px if that makes sense.

headerclass {
padding: 25px;
}

I also see that you are using the theme options to add margin left and margin right to the logo.. Remove that because it’s forcing the image smaller the mobile since it has a margin of 80px on each size.