Change menu font size

Hi

thanks for using best magazine theme.
you need to overwrite styles for menu sizes
write these styles in theme options -> general -> custom CSS

media only screen and (min-width: 1025px){
/* desktop styles*/
#top-nav > div > ul > li > a,#top-nav > div > ul > li > a:link,#top-nav > div > ul > li > a:visited,
#top-nav > div > div > ul > li > a,#top-nav > div > div > ul > li > a:link,#top-nav > div > div > ul > li > a:visited
 {

  padding:12px 16px 0px 16px;
  height:40px;
  font-size: 20px;
}

#top-nav > div > ul > li ul,
#top-nav > div > div > ul > li ul {
  top:52px;
}
}

media only screen and (min-width: 768px) and (max-width:1024px){
/* tablet styles*/
   #top-nav > div > ul > li > a,
   #top-nav > div > ul > li > a:link,
   #top-nav > div > ul > li > a:visited,
   #top-nav > div > div > ul > li > a,
   #top-nav > div > div > ul > li > a:link,
   #top-nav > div > div > ul > li > a:visited
  {
    padding: 12px 10px 0px 10px;
    height: 32px;
    font-size: 16px;
  }

}

Thanks for your response!

I copy-pasted the entire code snippet that you provided in Customize -> General -> General Main -> Custom CSS. However, it didn’t make any difference in the appearance of the menu font size or of anything else. I played by providing various numbers in font-size, height & padding parameters just to check that if it makes any difference or not, but it did not.

What am I missing? Please help!

Can you provide please link to your website?
I will check if custom CSS is printed and why it does not work.

Sure, here is the link:
https://sanskrit.byethost7.com/wp/en/sample-page/

I have another requirement to change logo size and to place the logo either in the middle or on the right of the page, if you can help me with that as well.

there is a bug in custom css, thanks for noting it. It will be fixed in the next version.

please change this line in best-magazine/inc/front/WDWT_front_params_output.php

echo "<style id='wdwt_custom_css_text'>".esc_html( $custom_css_text )."</style>";

to

echo "<style id='wdwt_custom_css_text'>". $custom_css_text ."</style>";

try this for logo image

#logo img {
display:inline;
}

#logo{
float:none;
}

Thanks Tigran!

After making the change you suggested in WDWT_front_params_output.php, I was able to bring the logo in center of the page and by using max-width, was able to change the logo size as well. [After bringing the logo to the center of the page, it started overlapping with the menu and search box in ‘mobile’ view; so, I kept it on left side only. Please let me know if there is any way to fix this (overlapping in mobile view) also].

However, menu font-size still remains the same – the code you provided earlier seems to have no impact at all on the menu. I tried using that same code through ‘Custom CSS’ plugin as well (not the ‘Custom CSS’ option provided in ‘Customize’ theme), but through that as well, menu size is not changing. Wondering what could have gone wrong?

Never mind!
I got where I was going wrong. Being a beginner in WordPress/php, didn’t know that I should have first removed the first line (media only …) along with its associated pair of curly-brackets.

Anyways, could you please tell me that how should I write both ‘desktop style’ code and ‘tablet style’ code in Custom CSS so that it makes the page dynamic according to the device (desktop/tablet)?

After adding the lines of code for desktop style, I checked the website on a desktop, a mobile phone, and a tablet, and though it’s looking fine on both desktop and mobile (except the overlap part that I mentioned in my previous post), it’s not looking good on tablet (menu goes on to the second line)

So, could you please elaborate the steps to add tablet-style piece of code as well? Though I am not an expert, but to me, it looks like that simply adding both of these code snippets that you provided in Custom CSS may not work for this purpose [I have tried that as well, but only one (one which is coded second – tablet style in our case) of these code snippets (desktop/tablet) seems to be getting reflected, overriding the other one (desktop style)].

Thank you for your support!

you can hide search on phone

media only screen and (max-width: 767px){
#search-block{
display:none;
}
}

use media queries

media only screen and (min-width: 1025px){
/* desktop styles here */
}

media only screen and (min-width: 768px) and (max-width: 1024px){
/* tablet styles here */
}

media only screen and (max-width: 767px){
/* phone styles here */
}

Got it; thanks a lot!