Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Navigation bar divs shrinking and scaling with changing window size.

Edrol97

Well-Known Coder
Hi All,

Been trying to figure this out. I have several navigationbar div IDs on my webpage as they are different styles. One thing I want them all to do is shrink the font size as a window becomes smaller so that they scale fully. This is the css I have for the navigationbar styles.

CSS:
#navigationbar,
#timesnavigationbar,
#timesnavigationbar,
#sunnavigationbar a {
  font-size: clamp(0.5rem, 2.5vw, 2rem);
}

Help is as always very appreciated.

All the best,

Eliot
 
Judging by that, unless something overrides that should work well for links. Are you having any specific problems? X E.
Hiya, The specifics are shown in the photos below. This is what the header is doing on shrinking and expanding the page. Ideally I want it to shrink font when I shrink the size of the window/viewport, so that the text is all on one line, at all times.
 

Attachments

  • Screenshot 2024-06-02 at 23.18.43.png
    Screenshot 2024-06-02 at 23.18.43.png
    73 KB · Views: 4
  • Screenshot 2024-06-02 at 23.19.06.png
    Screenshot 2024-06-02 at 23.19.06.png
    45.4 KB · Views: 4
  • Screenshot 2024-06-02 at 23.19.29.png
    Screenshot 2024-06-02 at 23.19.29.png
    46.4 KB · Views: 4
Hiya, The specifics are shown in the photos below. This is what the header is doing on shrinking and expanding the page. Ideally I want it to shrink font when I shrink the size of the window/viewport, so that the text is all on one line, at all times.

Trying to understand you. Are you looking to have each menu item on it's own line, or all of the menu items on a single line?
 
You'll have to adjust the font size and spacing so as to have your menu items on a single line.

Switching to a mobile "hamburger" menu on mobile is somewhat complicated. At a certain breakpoint (@media) you would switch the styles to change the layout of your menu, hide it from view (initially) and use a button (the hamburger) to trigger the display of the menu.
 
Back
Top Bottom