fantasy_5

Hi, Jpurdy647!

The link to my blog posts page is

Hi, Crouching Bruin!

I just wanted to say you rock. I ended up finding and removing the toggle menu code altogether. It was a hassle and prevented my top nav from performing properly on mobile devices.

I then created a brand new, responsive, and much better top navigation menu. It looks great on mobile devices and the hot pink mouse over color looks great. I appreciate you. Many thanks & kind regards.

Hi, Crouching Bruin!

I wanted to wait a bit before replying to give the changes times to take affect, but no such luck. The menu is still displaying on all pages. ?? However, it is no longer displaying on any of the single posts. ??

Here is the code that I put in my custom css

@media only screen and (max-width: 767px) {
   .navbar.navbar-inverse { display: none; }
}

@media only screen and (max-width: 767px) {
   .header-inner .toggle { display: none; }
   .blog .header-inner .toggle { display: block; }
}

.toggle a:nth-child(1) {
   display: none;
}
.toggle .toggleMenu {
   margin-top: 0;
}

Hi, Crouching Bruin!

Yes! The top navigation menu is now gone on mobile view… thank you. However, the toggle menu is still visible there. :/ I still see the toggle menu on the single posts and other pages. I also tried this code and still no such luck.

@media only screen and (max-width: 767px) {
   .nav { display: none; }
}

Here is a single post example

Is there a way to not display it on mobile devices by specific page number? Here are the page numbers for every page I don’t want it to display and also do not want it on single posts pages. Both menus are fine to display for mobile on the home page only.

1816(About), 2522(Archives), 1985(Contact), 3074( Affiliate Policy), 3656(Privacy Policy), 4050(Sitemap), 1997(SHOP) 4464(The KEI Model), 2477(Blog — Posts Page), 3094(365 Black)

Hi, Crouching Bruin!

Thanks for your reply. I tried that and it didn’t work. I even tried the code below and that didn’t work either.

@media only screen and (max-width: 767px) {
   .menu { display: none; }
}

I’m okay with the menus being on the homepage i just don’t want them to show up on the other pages or on single posts because i might create a new mobile menu. I’m not sure why it isn’t working properly on mobile devices. I have been racking my brain. Is there a way to get the code to work using specific page numbers to display none or is there a trick to get the current menu to work on mobile?

Hi, Crouching Bruin!

I am trying not to display my top navigation menu on any pages except the home page on mobile devices. (navbar navbar-inverse)The drop down isn’t working properly in mobile view on any pages except home and I have been racking my brain trying to figure out why.

Everything is fine and works properly on desktop view so I am pleased with that side of things.

However, I would like to display the regular menu on mobile devices
(nav)on all pages or just create a new one for mobile view only.

How can I go about achieving this? I tried adding the code below and it didn’t work even after deactivating my caching plugin.

@media only screen and (max-width: 767px) {
	.navbar navbar-inverse { display: none; }
}

Hi, Ryan!

Thanks, but I would prefer to resolve the issue without the use of a plugin.

I saw two separate solutions for specifying image dimensions, but I am not 100% certain as to how I would go about applying the second option.

1. In the theme’s functions.php file this can be added

add_image_size( 'thumb', 600, 350, true );
add_image_size( 'thumbnil', 600, 350, true );
add_image_size( 'medium', 600, 350, true );
add_image_size( 'large', 600, 350, true );
add_image_size( 'post-thumbnail', 600, 350, true );
add_image_size( 'thumb', 76, 51, true );
add_image_size( 'thumbnil', 236, 111, true );
add_image_size( 'large', 1920, 900, true );
add_image_size( 'post-thumbnail', 174, 174, true );
add_image_size( 'medium', 206, 114, true );
add_image_size( '{custom-image-type}', 600, 350, true );

I also saw this WordPress link for specifying, but still a tad confused.

2. This option to specify via css came from stack exchange and appears to be a better option.

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

3. Lastly, I also saw this example on a forum post here that specifies using tags, etc.

<img style="height:48px; width:48px;" class="photo avatar avatar-48" src="https://www.gravatar.com/avatar/9107bfc60d10714c163099f1653ebede?s=48&d=monsterid&r=g" alt="">

Please help! This “F” score is driving me bonkers. :/
BTW here is the link to my site again.

This is what I did with the tags… I’m not 100% certain how to apply them. There was an error when placing them in the functions.php. I was considering adding them to the footer.php but not sure.

<img src="https://celebrityscope.net/wp-content/uploads/2015/08/Celebrity-scope-home-Piano-Sky.jpg,q8fd192.pagespeed.ce.U7ZvrJnmcT.jpg" width="1920" height="900" />
<img src="https://celebrityscope.net/wp-content/uploads/2015/08/Celebrity-scope-home-head-phones-life-symbol.jpg,q8fd192.pagespeed.ce.ceFU4Av17C.jpg" width="1920" height="900" />
<img src="https://celebrityscope.net/wp-content/uploads/2015/11/Celebrity-scope-crowd-Purple-Cropped.jpg,q8fd192.pagespeed.ce.LsWZ5xPzch.jpg " width="1920 " height="900" />
<img src="https://celebrityscope.net/wp-content/uploads/2015/11/celebrity-scope-blog-slide.jpg,q8fd192.pagespeed.ce.ylihBHyYv7.jpg" width="1920" height="900" />
<img src="https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/09/GoDJbumc-e1441989784508.jpg?fit=236%2C111" width="236" height="111" />
<img src="https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Go_DJ_BUMC-e1441989218670.jpg?fit=236%2C111" width="236" height="111" />
<img src="https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/09/HellYeah_crowd-e1441989881450.jpg?fit=236%2C111" width="236" height="111" />
<img src="https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/11/New-York-city-Dentist-John-Wolfe-1.jpg?resize=174%2C174" width="174" height="174" />
<img src="https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/12/tara-hudson-transgender-woman.jpg?resize=174%2C174" width="174" height="174" />
<img src="https://i0.wp.com/celebrityscope.net/wp-content/uploads/2016/01/black-wall-street-1921-1.jpg?resize=353%2C199 " width="353" height="199" />
<img src="https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/02/IMG_20121124_Juvenile-e1441999988805.jpg?fit=236%2C145" width="236" height="145" />
<img src="https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Fanfest_crowd-e1441989694506.jpg?fit=236%2C111" width="236" height="111" />
<img src="https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Kendrick_Lamar-e1441988493244.jpg?fit=236%2C111" width="236" height="111" />
<img src="https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/12/former-nba-star-lamar-odom.jpg?resize=174%2C174" width="174" height="174" />
<img src="https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/09/K.Gates_-e1441989581148.jpg?fit=236%2C111 " width="236" height="111" />
<img src="https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Wiz_Kalifah-e1441990504853.jpg?fit=236%2C111" width="236" height="111" />
<img src="https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/11/web-dubois-negro-exhibit.jpg?resize=353%2C199" width="353" height="199" />
<img src="https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/12/Socialcentiv-sign-up-for-free-1.jpg?resize=174%2C174 " width="174" height="174" />
<img src="https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/12/caitlyn-jenner-woman-of-the-year1.jpg?resize=174%2C171 " width="174" height="171" />
<img src="https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/12/work-at-home-jobs.jpg?resize=174%2C174" width="174" height="174" />
<img src="https://pixel.wp.com/g.gif?v=ext&j=1%3A3.9.1&blog=85771369&post=0&tz=0&srv=celebrityscope.net&host=celebrityscope.net&ref=&rand=0.5643313588085316 " width="6" height="5" /> 

<img src="
https://www.awin1.com/cshow.php?s=395831&v=4024&q=143028&r=240775" width="234" height="60" />
<img src="https://www.google.com/uds/css/small-logo.png" width="51" height="15" />

I saw this tag on another website and so I will try it.

<img src=”image.jpg” width=”200″ height=”200″ />

There is no plug in that I’m using to specify image dimensions. However, I am using the pagespeed module, but even if removed that still doesn’t specify the image dimensions. :/ Yes, we are using the exact same report.

With your theme is your specify image dimensions score 100%? If so,what steps do I need to take?

Hi!

The following links were copied directly from GT Metrix.

The following image(s) are missing width and/or height attributes.

https://celebrityscope.net/wp-content/uploads/2015/08/Celebrity-scope-home-Piano-Sky.jpg,q8fd192.pagespeed.ce.U7ZvrJnmcT.jpg (Dimensions: 1920 x 900)
https://celebrityscope.net/wp-content/uploads/2015/08/Celebrity-scope-home-head-phones-life-symbol.jpg,q8fd192.pagespeed.ce.ceFU4Av17C.jpg (Dimensions: 1920 x 900)
https://celebrityscope.net/wp-content/uploads/2015/11/Celebrity-scope-crowd-Purple-Cropped.jpg,q8fd192.pagespeed.ce.LsWZ5xPzch.jpg (Dimensions: 1920 x 900) (2 uses)
https://celebrityscope.net/wp-content/uploads/2015/11/celebrity-scope-blog-slide.jpg,q8fd192.pagespeed.ce.ylihBHyYv7.jpg (Dimensions: 1920 x 900)
https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/09/GoDJbumc-e1441989784508.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Go_DJ_BUMC-e1441989218670.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/09/HellYeah_crowd-e1441989881450.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/11/New-York-city-Dentist-John-Wolfe-1.jpg?resize=174%2C174 (Dimensions: 174 x 174)
https://i0.wp.com/celebrityscope.net/wp-content/uploads/2015/12/tara-hudson-transgender-woman.jpg?resize=174%2C174 (Dimensions: 174 x 174)
https://i0.wp.com/celebrityscope.net/wp-content/uploads/2016/01/black-wall-street-1921-1.jpg?resize=353%2C199 (Dimensions: 353 x 199)
https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/02/IMG_20121124_Juvenile-e1441999988805.jpg?fit=236%2C145 (Dimensions: 236 x 145)
https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Fanfest_crowd-e1441989694506.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Kendrick_Lamar-e1441988493244.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i1.wp.com/celebrityscope.net/wp-content/uploads/2015/12/former-nba-star-lamar-odom.jpg?resize=174%2C174 (Dimensions: 174 x 174)
https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/09/K.Gates_-e1441989581148.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/09/Wiz_Kalifah-e1441990504853.jpg?fit=236%2C111 (Dimensions: 236 x 111)
https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/11/web-dubois-negro-exhibit.jpg?resize=353%2C199 (Dimensions: 353 x 199)
https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/12/Socialcentiv-sign-up-for-free-1.jpg?resize=174%2C174 (Dimensions: 174 x 174)
https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/12/caitlyn-jenner-woman-of-the-year1.jpg?resize=174%2C171 (Dimensions: 174 x 171)
https://i2.wp.com/celebrityscope.net/wp-content/uploads/2015/12/work-at-home-jobs.jpg?resize=174%2C174 (Dimensions: 174 x 174)
https://pixel.wp.com/g.gif?v=ext&j=1%3A3.9.1&blog=85771369&post=0&tz=0&srv=celebrityscope.net&host=celebrityscope.net&ref=&rand=0.5643313588085316 (Dimensions: 6 x 5)
https://www.awin1.com/cshow.php?s=395831&v=4024&q=143028&r=240775 (Dimensions: 234 x 60)
https://www.google.com/uds/css/small-logo.png (Dimensions: 51 x 15)

MarkRH!

Thanks for the rapid response. How would I create the tags using the current photo dimensions listed above? Is what I listed above completely incorrect? Is the functions.php the proper file to place the code? I read a few forum posts, but haven’t been lucky so far.

Hi, Crouching Bruin1

Thanks for your reply. I have an android. Perhaps it’s an issue that is exclusive to this type of device. For instance, the top navigation bar works and displays as it should on the home page and all page taps fire properly upon selection. However, there is a gap that exists in viewing the about page and there the menu doesn’t work properly. Same issue on the shop, archives, and, contact pages. :/ The gap of white space appears between “Celebrity Scope and “menu,” in the header. I’m currently, viewing the site in chrome, same issues in firefox.

Hi, Crouching Bruin!

I added a top navigation menu bar to my theme and it looks great. However, I do notice some white space at the very top (between nav menu bar and slide show) during first page load that does not stay once loaded 100% on desktop view.

The white space stays on mobile view which makes it difficult for the navigation menu to fire on some pages other than the homepage. Is there a way to remove this/

i saw someone use this code for a different theme. Is it possible to adjust it so that it applies to my theme instead? Thanks in advance for your assistance. Your replies have been very helpful.

.header-image {
  margin-top: 0;
}

.hgroup-wrap {
  display: none;
}