Caboom – Logo and menu not on same row

[mips101]

Using the Caboom Theme, we are not able to set the logo to go to the left, and the menu to go to the right of it on the right side of the screen. The logo is set already to align left on the logo section. We tried, but it seems that there is something wrong with the settings. We are using 1024×768.
Please kindly advise.

Thanks,
Mips.

Here is a link to the site : Link

[7Theme Support]

Hi,

on small screens like 1024 * 768 its the responsive version and its normal that the logo is centered and the menu below, please take a look at our demo website, its the same…

[mips101]

Is there a setting or a script though to fix it please ?
The menu only has 4 little links, and the logo is small, so there should be more than enough space on the same row for both.

Please kindly advise.
Thank,
Mips.

[7Theme Support]

Hi Mips,

I’m sorry, but we cannot check how much entries are in the menu and decide then if the theme is responsive or not, normally we have to adjust the header on small screens.

You can add the following code in WP admin -> Appearance -> Theme Options -> General -> Extra CSS Content, it should remove the logo to the left:

@media only screen and (max-width: 1059px) and (min-width: 768px)
#brand {
  float: left !important; 
  width: auto !important;
}

[mips101]

That extra css still did not do the trick. I think there is something that we did not set correctly in the theme options.
Here is a list of some of our existing options :

Navigation
Header style : logo left
Menu description : checked on
Height Submenu Element : 20

Customize WordPress
Logo height : 30
Logo Alignment : 14
Logo Alignment Bottom : 13

Any ideas of these settings are correct ? Or perhaps other settings that should be looked at ?

Thanks,
Mips

[7Theme Support]

Hi Mips,

no, the theme options have nothing to do how the theme looks in the responsive version.

I saw right now that I forgot something in the code I’ve postet here, this is the right code:

@media only screen and (max-width: 1059px) and (min-width: 768px) {
#brand {
  float: left !important; 
  width: auto !important;
}
}

[Author]

Posts